修改或覆盖材料用户界面按钮 css

Question

我有一个材质UI raiisedButton，我想更改背景颜色。

我有这个：

const style = {
 backgroundColor: 'green'
};
export default class CreateLinksave extends React.Component {
 <RaisedButton
   label="Continue"
   style={style}/>
}

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

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

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

问候。

Answer 1

您可以通过传入属性来覆盖样式。请参阅支持哪些属性的文档。

使用样式创建JS文件(或多个文件(听起来是个好主意，只要规则很简单。 如果您发现自己正在合并和覆盖样式，那么将样式保留在组件文件中会更容易。

你最终会得到类似的东西

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

Answer 2

如果您使用的是Material UI，则应使用jss，如其文档所示。并使用 withStyles HOC。实际链接 https://material-ui.com/customization/css-in-js/

下面是一个示例：

import { withStyles } from '@material-ui/core/styles';
const style = {
   back: {
    background: green,
  },
};
class CreateLinksave extends React.Component {
{classes} = this.props;
 <RaisedButton
   label="Continue"
   style={classes.back}/>
}
export default withStyles(styles)(CreateLinksave );

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