One of the examples in MUI is the Global style overrides:
const theme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontSize: '1rem',
},
},
},
},
});
In my code, I am using the InputLabel component and I want to change the text color when it is focused. The default color is #1976d2.
The CSS rule responsible for this is:
.css-1g2sqwz-MuiFormLabel-root-MuiInputLabel-root.Mui-focused {
color: #1976d2;
}
I tried to override it using the Global style overrides example provided above, but it didn't work. How can I change the focused label text color?
The code snippet below is not functioning as expected:
const theme = createTheme({
components: {
MuiInputLabel: {
styleOverrides: {
focused: {
color: 'red',
},
},
},
},
});