Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Override Material UI Button Text

Material UI button defaults the text within the button to uppercase. I want to override the text with the button to be the same as I have typed and not be uppercase.

I have tried to override the styling by using texttransform - none

viewButton: 
{ 
backgroundColor: "#00D2BC",
radius: "3px",
color: "#FFFFFF",
texttransform: "none"
}

<Button
 className={classes.viewButton}
 data-document={n.id}
 onClick={this.handleView}
>
   View Document
</Button>

Can anyone help with this.

Thanks

like image 270
user10609979 Avatar asked Jul 26 '19 15:07

user10609979


2 Answers

The only problem I see with the code in your question is that you have "texttransform" instead of "textTransform".

This aspect of the buttons is controlled by the theme (here, here, and here) so it is also possible to change this via the theme. I have demonstrated both approaches in the code below.

import React from "react";
import ReactDOM from "react-dom";
import {
  makeStyles,
  createMuiTheme,
  MuiThemeProvider
} from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const useStyles = makeStyles({
  button: {
    textTransform: "none"
  }
});
const defaultTheme = createMuiTheme();
const theme = createMuiTheme({
  typography: {
    button: {
      textTransform: "none"
    }
  }
});

function App() {
  const classes = useStyles();
  return (
    <MuiThemeProvider theme={defaultTheme}>
      <Button>Default Behavior</Button>
      <Button className={classes.button}>Retain Case Via makeStyles</Button>
      <MuiThemeProvider theme={theme}>
        <Button>Retain Case Via theme change</Button>
      </MuiThemeProvider>
    </MuiThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit button textTransform


Here's a similar example but for v5 of Material-UI:

import React from "react";
import ReactDOM from "react-dom";
import { styled, createTheme, ThemeProvider } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const StyledButton = styled(Button)(`
  text-transform: none;
`);
const defaultTheme = createTheme();
const theme1 = createTheme({
  typography: {
    button: {
      textTransform: "none"
    }
  }
});
const theme2 = createTheme({
  components: {
    MuiButton: {
      styleOverrides: {
        root: {
          textTransform: "none"
        }
      }
    }
  }
});

function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <Button>Default Behavior</Button>
      <StyledButton>Retain Case Via styled</StyledButton>
      <ThemeProvider theme={theme1}>
        <Button>Retain Case Via theme change</Button>
      </ThemeProvider>
      <ThemeProvider theme={theme2}>
        <Button>Retain Case Via alternate theme change</Button>
      </ThemeProvider>
    </ThemeProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit button textTransform

like image 45
Ryan Cogswell Avatar answered Oct 08 '22 00:10

Ryan Cogswell


For those who don't wanna go an do this everywhere inside each components try global ovverrides,

const myTheme = createMuiTheme({
    overrides: {
        MuiButton: {
            root: {
                textTransform: 'none'
            }
        }
    },
});

You make a theme object like so, and provide it to the theme provider which should wrap your app component in the index.js file

<ThemeProvider theme={myTheme}>
    <PersistGate loading={null} persistor={persistor}>
        <App />
    </PersistGate>
</ThemeProvider>

Imports:

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';
like image 116
Shamseer Ahammed Avatar answered Oct 07 '22 23:10

Shamseer Ahammed