Материальный компонент пользовательского интерфейса `theme.spacing` не определен после сборки
Я создаю текстовый редактор Material-UI, используя draft.js и оборачивая все функции в компоненты Material-UI.
Я освоился с ~3.9, но для этого проекта решил обновиться до 4.0. Может быть, я что-то упускаю, но у меня это обычно работает без проблем.
const styles = theme => ({
paper: {
paddingBottom: theme.spacing(2)
},
...
})
import { withStyles } from "@material-ui/styles"
...
export class EditorComponent extends Component {
...
render() {
const { classes } = this.props
}
}
export default withStyles(styles, { withTheme: true })(EditorComponent)
Это работает во время работы в webpack-dev-server, но когда я создаю javascript и пытаюсь импортировать его в другой проект и использовать его, я получаю эту ошибку в консоли...
Uncaught TypeError: theme.spacing is not a function
Кажется, я не могу найти ничего подходящего в этом вопросе.
Вот репо, если мой скрипт сборки поможет
@RyanCogswell Нет, проект, в который я это втягиваю, также был обновлен до 4.0.
Есть ли репо, которым вы можете поделиться с проектом, в который вы втягиваете это, где вы получаете эту ошибку?
@RyanCogswell Вытащил пример CRA со страницы примеров проектов пользовательского интерфейса материалов и развернул его, вытащив мой редактор из NPM, и я получаю те же ошибки github.com/jrdn91/material-ui-rte-cre-пример
Кажется проблематичным, что у вас есть material-ui в зависимостях обоих. Я полагаю, что в итоге вы получите две копии material-ui (что может привести к тому, что проблемы будут проявляться запутанным образом). В material-ui-rte вы должны иметь пакеты material-ui как зависимости вглядеться, чтобы проект, использующий их, полностью контролировал используемую версию material-ui.
@RyanCogswell, это хороший звонок, я внесу это изменение. На самом деле я выяснил ответ на свой вопрос, который я изложу в ответе.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Оказывается, вытягивание withStyles или makeStyles и т. д. из @material-ui/styles не включает тему по умолчанию. В @material-ui/core/styles включены их упакованные версии, которые включают тему по умолчанию.
Поэтому переход с import { withStyles } from "@material-ui/styles" на import { withStyles } from "@material-ui/core/styles" решит эту проблему.
Ссылка с этой страницы
https://material-ui.com/customization/default-theme/#material-ui-core-styles-vs-material-ui-styles
Я предполагаю, что проблема в проекте, в который вы это импортируете. Я подозреваю, что проект, в котором вы пытаетесь использовать это, использует версию 3.9 Material-UI.