修改或覆盖material-ui按钮css

Question

我有一个素材UI RaisedButton，我想改变背景颜色。

我有这个：

const style = {
 backgroundColor: 'green'
};

export default class CreateLinksave extends React.Component {

 <RaisedButton
   label="Continue"
   style={style}/>

}

但是当我刷新页面时，材料-ui样式仍然存在，那么如何覆盖样式呢？

第二个问题是，如何避免使用内联样式？我正在考虑用我的组件所需的样式创建一个带常量的js文件，导入它并以这种方式访问​​我的样式，这是一个很好的方法吗？

我是React的新手，所以一些帮助会很好......

问候。

Answer 1

您可以通过传入属性来覆盖样式。请参阅docs了解支持哪些属性。

创建一个JS文件（或多个文件），只要规则很简单，你的样式听起来就像一个好主意。如果你发现自己融合了重写样式，将样式保存在组件文件中会更容易。

你最终会得到像

这样的东西

import {green} from './my-style/colors';
...
<RaisedButton label="change min" backgroundColor={green} />

Answer 2

如果您使用的是Material UI，则应使用jss（如其文档中所示）。并使用withStyles HOC。实际链接

这里是一个例子：

BST *new_BST( int value )
{
    return new_BSTNode( value );
}

我认为您应该检查文档以拥有更好的可重用组件。