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({

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

Theme provider works fine on the other components

18 thoughts on “How to add a style to TextFields in theme provider”

  1. Hi there, I found your website by means of Google even as searching
    for a related subject, your website got here up, it seems to be good.
    I’ve bookmarked it in my google bookmarks.
    Hello there, simply become alert to your blog via Google, and found that it’s really informative.

    I’m going to watch out for brussels. I will appreciate in the
    event you continue this in future. A lot of other people will probably be benefited out of your writing.


Leave a Comment