InputProps Material-UI in React

Question

I have to make the TextField in material-ui to be uppercase. Right now, I need to put inputProps={{ style: { textTransform: 'uppercase' } }} in everything TextField . So I have define a theme in my react app for this and I wanted something to look like this.

Please also check picture on how I do them

https://i.stack.imgur.com/lnukB.png

MuiTextField.js

export default {
  root: {
    textTransform: 'capitalize',
  },
};

Answer 1

You can create a theme and override the textTransform to capitalize in every MuiInputBase class of your project, as below:

const theme = createMuiTheme({
  overrides: {
    MuiInputBase: {
      input: {
        textTransform: "uppercase"
      }
    }
  }
});

then wrap your project in a ThemeProvider and pass theme as a prop to the ThemeProvider :

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <Demo />
  </ThemeProvider>,
  document.querySelector("#root")
);

sandbox link

Using this method, you no longer need to manually add textTransform: "capitalize" to every TextField component.