How to add a style to TextFields in theme provider

I added custom transitions and colors for the textfields and i can pass it to the component with makeStyles hook .

But the problem is every time i want to use the customs i should define it in the component

I want to set it in the theme provider so that it is an static style for all the textfield components

I tried to add in overrides section in the createMuiTheme

Here is what i’ve tried so far (just the relevant part)

  const THEME = createMuiTheme({

        overrides:{
            "& label.Mui-focused": {
              color: "white",
            },
            "& .MuiInput-underline:after": {
              borderBottomColor: "white",
            },
           }
         return (
               <div>
                 <MuiThemeProvider theme={THEME}>
                   <Header />
                   <MainPage />
                 </MuiThemeProvider>
               </div>
            );
         };
    

Theme provider works fine on the other components

1 thought on “How to add a style to TextFields in theme provider”

  1. I added

    MuiTextField: {
            root:{
    

    to the theme provider in the override section to declare this style is for which component

     const THEME = createMuiTheme({
        overrides: {
          MuiTextField: {
            root:{
            "& label.Mui-focused": {
              color: "white",
            },
    
    Reply

Leave a Comment