我正在尝试在阅读本教程后将自定义主题应用于我的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;
根据我的主题,当我的控件呈现时,它应该有一个&#34; deepPurpleA700&#34;颜色....但我的控制文本总是黑色。所以我的主题没有应用。
答案 0 :(得分:12)
您应该首先从&#39; material-ui / styles / colors&#39;中导入颜色。 然后在调色板对象中使用它们,如下所示:
import React, { Component } from 'react';
import {render} from 'react-dom';
import {indigo500, indigo700, redA200} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
import Main from './Main';
const muiTheme = getMuiTheme({
palette: {
primary1Color: indigo500,
primary2Color: indigo700,
accent1Color: redA200,
pickerHeaderColor: indigo500,
},
});
class App extends Component {
render() {
return (
<div>
<MuiThemeProvider muiTheme={muiTheme}>
<Main />
</MuiThemeProvider>
</div>
);
}
}
render(<App/>, document.getElementById('app')); //you should be having a div with an id of app in your index.html file
并且Main.js文件是
import React, { Component } from 'react';
import FloatingActionButton from 'material-ui/FloatingActionButton';
export default class Main extends Component {
render() {
return (
<div>
<AppBar title="Title"/>
<FloatingActionButton secondary={true} />
</div>
);
}
}
答案 1 :(得分:4)
我很确定你需要
static childContextTypes = {
muiTheme: React.PropTypes.object,
};
之前
getChildContext()
方法。完成后,您应该能够从中删除任何与主题相关的内容 componentWillMount()
现在,这不适用于基础文本。但我可以确认该主题正在应用。我通过添加appBar组件并更改theme.js文件中的颜色来测试它。我还添加了一个带有ListItems的List,并且您正在寻找文本样式。
以下是修改后的App.jsx文件gist的链接。
另外,作为你在server.js中的旁注,你在第5行有一个小错字
new webpackDevServer(webpack(config), {
不
new WebpackDevServer(webpack(config), {
答案 2 :(得分:3)
对我来说,它与:
import React, {Component} from 'react';
import {createMuiTheme} from '@material-ui/core/styles';
import MuiThemeProvider from '@material-ui/core/styles/MuiThemeProvider';
const theme = createMuiTheme({
palette: {
primary: {
main: '#0b5994',
},
secondary: {
main: '#1d83c6',
},
},
});
class App extends Component {
render() {
return (
<div className="App">
<MuiThemeProvider theme={theme}>
/* content here! */
</MuiThemeProvider>
</div>
);
}
}
export default App;