Это было очень распространенная проблема для меня тоже. Это происходит потому, что MaterialUI нуждается в некоторых базовых стилях для работы. Вы можете найти их здесь: http://material-ui.com/#/get-started
Поэтому, если вы не добавите этот стиль ко всем компонентам, использующим материал-ui, он отобразит вышеуказанную ошибку, потому что ищет зависимость, которая недоступна. Если вы перейдете к ссылке выше, она покажет вам, какие стили ей нужны. Тем не менее, становится очень утомительно включать эти стили каждый раз, в каждый компонент, который я делаю.
Я использую React Mixins. Они БАЗОВЫЕ частичные компоненты, которые вы можете добавить в свой код компонента. Когда вы добавляете mixin к компоненту, что эффективно происходит, mixin расширяется и добавляется к вашему компоненту. Очень похоже на переменные в конкатенации строк (ужасный пример, я знаю, но это поможет вам понять). Когда вы добавляете переменную в конкатенацию строк, переменная эффективно заменяется ее значением. Это то, что происходит с React Mixins.
Вот что я хотел бы сделать:
Определить material.jsx файл в моем каталоге, который идет как это (Это в основном скопированы с их странице Начало работы):
var React = require('react'),
mui = require('material-ui'),
ThemeManager = new mui.Styles.ThemeManager(),
injectTapEventPlugin = require("react-tap-event-plugin");
injectTapEventPlugin();
module.exports = {
childContextTypes: {
muiTheme: React.PropTypes.object
},
getChildContext: function() {
return {
muiTheme: ThemeManager.getCurrentTheme()
};
}
}
выше это просто mixin, он содержит все стили, требуемые Material-UI для правильной работы. Теперь я просто использую вышеуказанный модуль как mixin во всех компонентах Material-UI.
var React = require('react'),
material = require('./material.jsx'),
mui = require('material-ui'),
FlatButton = mui.FlatButton
module.exports = React.createClass({
mixins: [material],
render: function() {
return <FlatButton>Hello</FlatButton>
}
})
В вашем коде, если вы сделаете этот material.jsx файл и добавьте Примеси строки: [материал], как я сделал, это будет все начать работать :)