我在阅读本教程后尝试将自定义主题应用于我的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”颜色....但我的控制文本总是黑色。所以我的主题不适用。