阅读本教程后,我尝试将自定义主题应用于我的React组件
http://www.material-ui.com/#/customization/themes
我将主题写在这样的单独的javascript文件中
import Colors from 'material-ui/lib/styles/colors'; import ColorManipulator from 'material-ui/lib/utils/color-manipulator'; import Spacing from 'material-ui/lib/styles/spacing'; import zIndex from 'material-ui/lib/styles/zIndex'; export default { spacing: Spacing, zIndex: zIndex, fontFamily: 'Roboto, sans-serif', palette: { primary1Color: Colors.cyan500, primary2Color: Colors.cyan700, primary3Color: Colors.lightBlack, accent1Color: Colors.pinkA200, accent2Color: Colors.grey100, accent3Color: Colors.grey500, textColor: Colors.deepPurpleA700, alternateTextColor: Colors.white, canvasColor: Colors.white, borderColor: Colors.grey300, disabledColor: ColorManipulator.fade(Colors.darkBlack, 0.3), pickerHeaderColor: Colors.cyan500, } };
我按照以下方式将此主题应用于我的组件
import React from 'react'; import mui from 'material-ui'; import injectTapEventPlugin from 'react-tap-event-plugin'; import ThemeManager from 'material-ui/lib/styles/theme-manager'; import Colors from 'material-ui/lib/styles/colors'; import MyTheme from './theme.js'; injectTapEventPlugin(); class App extends React.Component { constructor(props) { super(props); this.state = { messages : [{id: 1, text: 'Hi'}, {id: 2, text: 'Hello'}] }; } getChildContext() { return { muiTheme: ThemeManager.getMuiTheme(MyTheme) }; } componentWillMount() { let newMuiTheme = this.state.muiTheme; this.setState({ muiTheme: newMuiTheme, }); } render() { var messageNodes = this.state.messages.map((message) => { return (<div key={message.id}>{message.text}</div>); }); return (<div>{messageNodes}</div>); } } App.childContextTypes = { muiTheme: React.PropTypes.object }; export default App;
根据我的主题,当控件呈现时,它应该具有“ deepPurpleA700”颜色..但是控件文本始终为黑色。所以我的主题不适用。
我的完整代码可在https://github.com/abhitechdojo/MovieLensReact中找到。
我很确定你需要
static childContextTypes = { muiTheme: React.PropTypes.object, };
在你之前
getChildContext()
方法。完成后,您应该可以从componentWillMount()中删除任何与主题相关的内容
现在,这不适用于基本文本。但我可以确认正在应用该主题。我通过添加appBar组件并更改theme.js文件中的颜色进行了测试。我还添加了一个带有ListItems的列表,而该文本样式正是您想要的。
这是修改后的App.jsx文件要点的链接。
另外,作为server.js中的补充说明,您应该在第5行上有一个小的错字
new webpackDevServer(webpack(config), {
不
new WebpackDevServer(webpack(config), {