rickymetz rickymetz - 18 days ago 10
React JSX Question

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?

Answer

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/

Comments