CODEWITHSUNDEEP
polymer
Ajay Singh Beniwal
Ajay Singh Beniwal

Reputation: 19037

Paper-Button always as upper case

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?

Upvotes: 105

Views: 146742

Answers (6)

ddvader44
ddvader44

Reputation: 51

In Material UI v5.0+, you can easily approach that with this:

import { Button } from "@mui/material";

<Button sx={{textTransform : "none"}}>Your text here</Button>

Upvotes: 2

arrmani88
arrmani88

Reputation: 1072

in MUI 5

<Button
    sx={{textTransform: 'none'}}
>

Upvotes: 4

Ghassan Alaydi
Ghassan Alaydi

Reputation: 191

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

<Button sx={{textTransform: "none"}}/>

Upvotes: 19

levenshtein
levenshtein

Reputation: 1019

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

Upvotes: 73

nwaweru
nwaweru

Reputation: 2034

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'));

Upvotes: 149

ebidel
ebidel

Reputation: 24109

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;
}

Upvotes: 103

Related Questions