Material-ui: Overriding the css

[ghost]

is there a way to override the material ui to style.css ? For example i want to change the color of the components

[BobertForever]

There's a section of the documentation outlining how to override material ui's css:
https://github.com/callemall/material-ui#customization

[hai-cea]

Thanks @BobertForever

[ghost]

yeah i got it sorry for not removing this issue after i get it :)

[netpoetica]

@hai-cea Just an FYI, in your Theme Customization guide you have some indication that you should use getInitialState, which React does not like. It's probably been deprecated in favor of state as a property instead of getInitialState as a function:

getInitialState () {
  return {
    muiTheme: this.context.muiTheme,
  };
}

It's been a pretty major uphill battle trying to figure out how to customize components. Maybe you can take a look at that guide and determine if it is accurate, because it does not appear to achieve the expected results. I'm referring specifically to the section "Overriding Theme Variables".

Additionally, in regards to the confusion about your documentation on "in-line styles": I believe the problem I am seeing is that the style prop on, let's say for example, a RaisedButton, doesn't effect the theme.raisedButton.* styles, only the styles on the box around it. Let's say for example, I wanted to change the text color specifically of a RaisedButton:

const style = {
  width: '10px',
  color: 'pink',
  backgroundColor: 'green'
};

export default class ExampleCustomComponent extends React.Component {

  render () {
    return (
      <RaisedButton label='Material UI Custo Button' style={style} />
    );
  }

};

In this case, the width with be altered but the font colors will not, because they are part of the raisedButton props on the theme. Is there a recommended procedure for customizing the properties of specific components?

[oliviertassinari]

It's been a pretty major uphill battle trying to figure out how to customize components.

I had a look at the docs. I agree, I think that we can do much better.

[mbrookes]

Not least it doesn't even show how to use the dark theme. :)

[oliviertassinari]

Yeah, regarding the dark side, I was thinking of adding in the docs the possibility to use it for the all site and not just a small area.

[AurelianSpodarec]

Is there a way to change the .mui-container paddings on mobile view to -25px?

Oh, and I'm using this Material-UI just CSS: https://www.muicss.com/

[mbrookes]

@AurelianSpodarec That isn't Material-UI. Their github repo is linked from the site you posted.