Материал-щНеверный тип элемента

Question

Мне трудно работать с Table-ui Table (который я использовал десятки раз в моих предыдущих проектах).

В настоящее время я использую @material-ui/core@3.5.1, я также пробовал с @3.2.0 и @3.6.0.

Я также использую react@16.3.2 и react-dom@16.2.0

У меня есть некоторые другие компоненты (Button, TextField ...) из Material-UI в моем проекте, который работает отлично, однако, когда я пытаюсь использовать пример SimpleTable, у меня появляется следующая ошибка:

Я пытался использовать его в новом проекте =>Оно работает.

Вот почему я пытался перейти с одной версии на другую, но она все еще не работает.Я не могу понять, где моя ошибка: (.

Вот мой SimpleTable Component (идеальная копия / прошлое из документации mui):

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing.unit * 3,
        overflowX: 'auto'
    },
    table: {
        minWidth: 700
    }
});

let id = 0;
function createData(name, calories, fat, carbs, protein) {
    id += 1;
    return { id, name, calories, fat, carbs, protein };
}

const rows = [
    createData('Frozen yoghurt', 159, 6.0, 24, 4.0),
    createData('Ice cream sandwich', 237, 9.0, 37, 4.3),
    createData('Eclair', 262, 16.0, 24, 6.0),
    createData('Cupcake', 305, 3.7, 67, 4.3),
    createData('Gingerbread', 356, 16.0, 49, 3.9)
];

function SimpleTable(props) {
    const { classes } = props;

    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell>Dessert (100g serving)</TableCell>
                        <TableCell numeric>Calories</TableCell>
                        <TableCell numeric>Fat (g)</TableCell>
                        <TableCell numeric>Carbs (g)</TableCell>
                        <TableCell numeric>Protein (g)</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map(row => {
                        return (
                            <TableRow key={row.id}>
                                <TableCell component="th" scope="row">
                                    {row.name}
                                </TableCell>
                                <TableCell numeric>{row.calories}</TableCell>
                                <TableCell numeric>{row.fat}</TableCell>
                                <TableCell numeric>{row.carbs}</TableCell>
                                <TableCell numeric>{row.protein}</TableCell>
                            </TableRow>
                        );
                    })}
                </TableBody>
            </Table>
        </Paper>
    );
}

SimpleTable.propTypes = {
    classes: PropTypes.object.isRequired
};

export default withStyles(styles)(SimpleTable);

Я использую его следующим образом:

import React from 'react';
import SimpleTable from './Table';

export const MyPage = () => (
    <div>       
        <SimpleTable />
    </div>
);

Я использую MyPage непосредственно под провайдером тем в приложении render()

 <MuiThemeProvider theme={theme}>
     <MyPage />        
 </MuiThemeProvider>

У меня есть другая страница, которая работает с другими компонентами Material-UI.

Если я изменил рендеринг SimpleTable просто для того, чтобы вернуть <p>Hello World</p> вместо всей таблицы, он работает. Поэтому он не может быть получен из экспорта по умолчанию или из глобального импорта компонента imo. Это может произойти из моегоимпорт материалов ... но они кажутся в порядке ..

Если у кого-то есть идея, некоторая помощь будет очень полезна здесь <3 </p>

PS: я попытался начать свой комментарий с "Привет"или" Привет ", но, кажется, он автоматически удаляется из моего поста x)

Answer 1

Похоже, что проблема возникла из-за конфликта с response-native-web, который используется в других местах проекта.

Обновление react-native-web + установка react-art решает проблему.