Question

我对CSS和前端Web开发相当陌生，在设置页面上按钮的样式时遇到了麻烦。我想改变它的文本颜色，也许也可以改变我的主题的主要颜色（目前它看起来像青色，我想让它变成蓝色）。我知道material-ui已经转移到内联样式，我尝试将样式作为变量传递给＆＃34;样式＆＃34;按钮中的字段，但无法使其工作。任何帮助，将不胜感激。

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;

Answer 1

在材料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/#/customization/themes

更改材料-ui版本0.15.4中的文本颜色和样式

1 个答案: