Change notchedOutline span text color in material UI

user_11782009 0
Viewed 434

I'm currently trying to customise the textfield of materialUI. Here is what I am trying to change

I am having difficulty trying to access and change the color of the span tag that the text resides in. At the same time, i am also having difficulty in persisting the border color when the textfield is in focus. I do not quite understand how these (peusdo selectors?) work. How & when do i nest them or use them, for that matter.

e.g.

"& .MuiOutlinedInput-root": {
        "& fieldset": {
          borderColor: "rgba(0, 0, 0, 0.23)"  // default
        },
        "&.Mui-focused fieldset": {
          border: "2px solid red"             // focus
        }

Any help would be much appreciated!

material-ui reactjs
1 Answers

for styling the label of TextField, use the InputLabelProps and target the focused class of the label.

<TextField
    InputLabelProps={{ classes: { focused: classes.labelRoot } }}
    variant="outlined"
    label="Colored Label"
/>

const useStyles = makeStyles((theme) => ({
    labelRoot: {
        "&&": {
            color: "pink"
        }
    }
}));

In labelRoot class, "&&" is used for increasing the specificity to override the default style.

Here is the working demo:

Edit clever-haibt-3z3y9

For styling it in theme:-


const theme = createMuiTheme({
    overrides: {
        MuiFormLabel:{
            root:{
                '&$focused':{
                    color:'green'
                }
            },
        }
    }
});
user_112222820
Related