Material-ui: EnhancedButton cannot have text-transform changed

[StephanBijzitter]

Problem description

I use RaisedButtons that contain case-sensitive content (long story), but I am unable to set text-transform: none on the inner span element. Using buttonStyle, the transform is applied to the parent div of the span, but the span overrides it with its own inline styles.

Link to minimal working code that reproduces the issue

<RaisedButton label="foo" buttonStyle={{
    textTransform: 'none'
}}/>

With this, I would expect to see foo, but instead I see FOO. This is because it renders to:

<div style="text-transform: none">
    <span tyle="text-transform: uppercase">foo</span>
</div>

Solution

A solution would be to apply the text-transform the to parent div and then let the span inherit it:

<div style="text-transform: uppercase">
    <span tyle="text-transform: inherit">foo</span>
</div>

This way, I will be able to override it with buttonStyle correctly.

Versions

• Material-UI: 0.17.1
• React: 15.4.2
  

  - Browser: Opera 43.0.2442.1165

I'll be willing to send in a pull request if someone can list me the files that contain this logic.

[uvtzxpm]

A possible workaround, pass your button content via children:

<RaisedButton>foo</RaisedButton>

Not ideal, though.

[psigns]

Do you need set this on a case-by-case basis via props, or are all of your RaisedButtons case-sensitive? If you are okay setting text-transform: none for all your raised buttons, you can set this in your custom muiTheme.

  raisedButton: {
    textTransform: 'none',
  },

[StephanBijzitter]

Ah, good option. Sadly it's only a part of the application :-(