CODEWITHSUNDEEP
cssreactjsmaterial-ui
rickymetz
rickymetz

Reputation: 53

Unable to override Material-UI theme styles

I'm using Material-UI in a project and I am trying to override the default theme style of textTransform:"uppercase", and instead, replace it with textTransform:"capitalize".

Consulting the docs on custom styling informed me that I should use inline styles or a custom class.

Adding className="capitalize" (which has as a text-transform property in the class) or adding style={{textTransform: "capitalize"}} produces the same result. The parent div is passed the CSS property, but is ultimately overridden by a child span.

Is this intended behavior, or am I doing something wrong?

Upvotes: 2

Views: 3820

Answers (2)

Jeff McCloud
Jeff McCloud

Reputation: 5927

You can use a custom theme to override the textTransform:

const App = () => {
    const customTheme = { button: { textTransform: 'capitalize' } };

  return (
    <MuiThemeProvider muiTheme={getMuiTheme(customTheme) }>
      <Example />
    </MuiThemeProvider>
  )
};

Working jsFiddle: https://jsfiddle.net/88uq8751/7/

Upvotes: 2

Nitin Agarwal
Nitin Agarwal

Reputation: 45

Please give more info in you question. However,I think this is not intended behaviour. I guess, check your other props, maybe with those props the effect of style props is getting overrided.

Still if that is not the cause, check the material-ui repo codebase on GitHub. From my experience working with material-ui, many problems I solved by going through their codebase and not using their doc. Hope the info helps.

Upvotes: 0

Related Questions