2

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?

Community
  • 1
  • 1
rickymetz
  • 53
  • 1
  • 8

2 Answers2

2

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/

Jeff McCloud
  • 5,777
  • 1
  • 19
  • 21
  • This worked marvelously for my purposes, thank you. Out of curiosity is there any way to create a change to a single button, rather than all buttons (as changing the theme file does)? – rickymetz Nov 16 '16 at 20:40
  • Yup. use the labelStyle property: labelStyle={{ textTransform: 'capitalize' }} on the RaisedButton or FlatButton – Jeff McCloud Nov 16 '16 at 20:44
0

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.

Nitin Agarwal
  • 45
  • 4