修改或覆盖Material-UI按钮CSS

Question

I have a material UI RaisedButton and I want to change the background color.

I have this:

const style = {
 backgroundColor: 'green'
};

export default class CreateLinksave extends React.Component {

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

}

but when I refresh the page the material-ui style remains, so how can I override the style?

A second question is, how to avoid doing inline styling? I was thinking on create a js file with constants with the styles I need for my components, import it and access to my styles that way, is that a good approach?

I'm new to React so some help would be nice...

Regards.

Answer 1

You can override the style by passing in the attribute. See the docs for which attributes are supported.

creating a JS file (or multiple files) with your styling sound like a good idea, as long as the rules are simple. if you find yourself merging & overriding styles it would be easier just keeping the style in the component file.

You'll end up with something like

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

Answer 2

If you are using Material UI you should use jss as seen in their documentation. And use the withStyles HOC. Actual link https://material-ui.com/customization/css-in-js/

Here is an example:

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 );

I think you should check the documentation to have better and reusable components.