Paper-Button always as upper case

Polymer

Polymer Problem Overview


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?

Polymer Solutions


Solution 1 - Polymer

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

Solution 2 - Polymer

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

Solution 3 - Polymer

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
Categories

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAjay BeniwalView Question on Stackoverflow
Solution 1 - PolymerebidelView Answer on Stackoverflow
Solution 2 - PolymernwaweruView Answer on Stackoverflow
Solution 3 - PolymerlevenshteinView Answer on Stackoverflow