CODEWITHSUNDEEP
cssreactjsmaterial-ui
Louise
Louise

Reputation: 5

How do I find which Material UI default theme label will change the default border color (not focus or hover border)?

I am currently using 'createTheme' to customize the theme of my TextField input from Material UI.

To make the changes I am looking at the Material UI default theme on https://mui.com/customization/default-theme/ and making changes to the appropriate labels.

I want to change the default border of the TextField - the border that appears when there is no hover or focus on the TextField. The border is currently grey

Does anyone know which default theme label refers to that border? I can't seem to find it

Upvotes: 0

Views: 519

Answers (3)

Samira
Samira

Reputation: 2753

it is a good way and you can use !important to be sure it works

const theme = createTheme({

 components: {
    MuiInputBase: {
      styleOverrides: {
        root: {
          "&:before":{
            borderBottom:"1px solid yellow ",}
        },
      },
    },
  },

})

Upvotes: 0

Samira
Samira

Reputation: 2753

I used it on main layout :

   const useStyles = makeStyles(() => (
    {
        root: {

                "& .css-h5voop-MuiInputBase-root-MuiInput-root:before": {
            borderBottom:" 1px solid rgb(215 50 50 / 70%)",
                },

     }
     })

Upvotes: 0

Avinash Dhumal
Avinash Dhumal

Reputation: 45

use inline styling inside a textfield. <TextField style={{ border:"1px solid color name", }}/>

Upvotes: 0

Related Questions