rickymetz rickymetz - 9 months ago 58
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

, and instead, replace it with

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

(which has as a
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

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

Answer Source

You can use a custom theme to override the textTransform:

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

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

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