修改或覆蓋Material-UI按鈕CSS

Question

我有一個材質UI RaisedButton，我想更改背景顏色。

我有這個：

const style = {
 backgroundColor: 'green'
};

export default class CreateLinksave extends React.Component {

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

}

但是，當我刷新頁面時，material-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 );

我認為您應該檢查文檔以擁有更好和可重用的組件。