Я получаю ошибку после обновления до Material UI 4 - withStyles - PullRequest
Новая
       45

Я получаю ошибку после обновления до Material UI 4 - withStyles

2 голосов
/ 04 июня 2019

Я получаю следующую ошибку после обновления MUI v4.0.2 с v3.9.x:

Вы должны передать компонент в функцию, возвращаемую функцией connect. Вместо этого получил {"propTypes": {}, "displayName": "WithStyles (MyComponent)", "options": {"defaultTheme": {"точки останова": {"keys": ["xs", "sm", " мкр», "LG", "х"], "ценность": ...

MyComponent: 

import { withStyles } from '@material-ui/core/styles'

const getStyles = theme => ({
  fooBar: {
    ...
  },
})

...
export default withStyles(getStyles)(MyComponent)

MyContainer: 

import { connect } from 'react-redux'
import MyComponent from './MyComponent'
...
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

Как перенести withStyles?

Ответы [ 2 ]

4 голосов
/ 05 июня 2019

Версия 5.0.7 и более ранние версии response-redux выполнили следующую проверку для компонента, переданного connect:

https://github.com/reduxjs/react-redux/blob/v5.0.7/src/components/connectAdvanced.js#L91

    invariant(
      typeof WrappedComponent == 'function',
      `You must pass a component to the function returned by ` +
      `${methodName}. Instead received ${JSON.stringify(WrappedComponent)}`
    )

С введением React.forwardRef (который интенсивно используется в Material-UI v4) и другими функциями, представленными в React 16.8 (зацепки), можно иметь тип компонента, который не a функция.

В более поздних версиях response-redux вместо этого используется isValidElementType из пакета react-is. Это правильно распознает типы компонентов, возвращаемые forwardRef и другими методами.

Я полагаю, что версии 5.1 и более поздние версии response-redux должны работать нормально, не вызывая ошибочную ошибку, упомянутую в вопросе.

0 голосов
/ 04 июня 2019

Вот как я это делаю:

import { withStyles } from '@material-ui/core/styles';

Определите свой объект стилей: посмотрите на примеры материала-интерфейса для руководства 

const styles => ({
  root: {
    display: 'flex',
  }
});

Затем экспортируйте компонент, используя ваши стили: 

export default withStyles(styles)(YourComponent);
...