我对CSS和前端web开发相当陌生,在设置页面上的按钮样式时遇到了麻烦。我想改变它的文字颜色,也许改变我的主题的原色,以及(目前它看起来青色,我想让它蓝色)。我知道material-ui已经移动到内联样式,我尝试将样式作为变量传递到按钮中的"样式"字段,但无法使其工作。任何帮助都会很感激。
var React = require('react'),
mui = require('material-ui'),
LoginDialog = require('./login-dialog.jsx'),
RaisedButton = mui.RaisedButton,
MuiThemeProvider = require('material-ui/styles/MuiThemeProvider'),
darkBaseTheme = require('material-ui/styles/baseThemes/darkBaseTheme');
var Index = React.createClass({
getChildContext: function() {
return {
muiTheme: getMuiTheme(darkBaseTheme),
};
},
childContextTypes: {
muiTheme: React.PropTypes.object
},
render: function() {
return (
<div className="mui-app-canvas home-page-background">
<RaisedButton
className="login-button"
label="Login"
onTouchTap={ this._handleLoginDialog }
linkButton={ false } />
<LoginDialog
ref="loginDialog"
loginUrl={ this.props.loginUrl } />
</div>
)
},
_handleLoginDialog: function() {
this.refs.loginDialog.show();
}
});
module.exports = Index;
在material ui中编辑样式的最佳方法是编辑或编写自己的主题。
在这里你可以看到已经实现的主题:
https://github.com/callemall/material-ui/tree/master/src/styles/baseThemes这里是所有可编辑的属性:
https://github.com/callemall/material-ui/blob/master/src/styles/getMuiTheme.js这里是如何实现它:
http://www.material-ui.com//定制/主题