93

I am using Paper-Button but I am facing issue that the button text always gets capitalized instead or normal case. I do not see any CSS or Javascript property being applied to make it upper case.

How should I resolve this problem?

Seth McClaine
  • 9,142
  • 6
  • 38
  • 64
Ajay Beniwal
  • 18,857
  • 9
  • 81
  • 99
  • I'm not known with the paper-button, but i think you can overwrite it with css or javascript to make it lowercase? – Onovar Aug 06 '14 at 10:51
  • It is applied with CSS: https://github.com/Polymer/paper-button/blob/master/paper-button.css – badsyntax Aug 06 '14 at 11:35

5 Answers5

124

I had the same issue and I solved the problem via adjusting the default theme. Add the following code to a file (name of your choice).js

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({      
  typography: {
    button: {
      textTransform: 'none'
    }
  }
});

export default theme;

You can then add the file to your app in index.js. I named it theme.js:

...
import theme from './theme';    
...
const app = () => (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    <App />
  </ThemeProvider>
);

ReactDOM.render(app, document.getElementById('root'));
Community
  • 1
  • 1
nwaweru
  • 1,723
  • 1
  • 13
  • 14
  • 1
    button: { textTransform: 'none' } this resolved for me. Thumbs Up – Saad Khan Jan 29 '20 at 13:09
  • Worked for me, thanks. I got a warning about `createMuiTheme` being deprecated but had no problem swapping it for `createTheme` as suggested. – Taran Jul 23 '21 at 08:16
  • This is nice, but I'm really struggling with the object structure. Say, I want to change the shadow spread now; how do I know which properties inside which objects do I need to change? – ankush981 Oct 16 '21 at 11:02
  • @ankush981 Take a look at: https://mui.com/customization/default-theme/ for possible options and here: https://bareynol.github.io/mui-theme-creator/ – Mamrezo Feb 11 '22 at 23:49
98

As was mentioned in the comments above, the material design spec for buttons specifies that the text should be uppercase, but you can easily override its CSS property:

paper-button {
  text-transform: none;
}
CletusW
  • 3,890
  • 1
  • 27
  • 42
ebidel
  • 23,921
  • 3
  • 63
  • 76
  • 4
    No, this is not specified. The spec even says that contained buttons can be in sentence case: https://material.io/components/buttons/#contained-button – Lucas Willems Nov 04 '19 at 10:32
60

Inspired by the the CSS style above here is the inline styling for localized Button text transformation -

import {Button} from '@material-ui/core';

// Begin Component Logic
 
<Button style={{textTransform: 'none'}}>
   Hello World
</Button>

// End Component Logic
levenshtein
  • 879
  • 8
  • 4
11

If you use Mui 5 then you can use the sx syntax

<Button sx={{textTransform: "none"}}/>
Ghassan Alaydi
  • 111
  • 1
  • 3
0

in MUI 5

<Button
    sx={{textTransform: 'none'}}
>
arrmani88
  • 756
  • 8
  • 25