阅读本教程后,我尝试将自定义主题应用于我的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”颜色..但是控件文本始终为黑色。所以我的主题不适用。
我很确定你需要
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), {
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句