I'm trying to customize the color of my MUI5 TextField component. Simply overriding the primary and secondary colors is not enough, so I'm striving for more control over the colors.
The component:
<TextField
label='Username'
variant='outlined'
onChange={(e) => setToken(e.target.value)}
value={token}
size='small'
/>
This is the theme that I use:
const theme = createTheme({
components: {
MuiTextField: {
styleOverrides: {
root: {
'.MuiOutlinedInput-root': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'pink',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'pink',
},
},
},
},
},
MuiInputLabel: {
styleOverrides: {
root: {
color: 'pink',
'&.Mui-focused': {
color: 'pink',
},
},
},
},
},
});
These style overrides are enough to control the color of
the label (Username) when the TextField is focused and unfocused
the border color when the TextField is unfocused or (focused AND hovered over)
The problem is that I haven't been able to change the border color when the TextField is active and not hovered over. This is the style that is applied on it: css-9ddj71-MuiInputBase-root-MuiOutlinedInput-root.Mui-focused.MuiOutlinedInput-notchedOutline
I tried different combinations of style overrides in the custom theme but no luck so far.
Can someone tell me how to change the border color in the above case?
Maybe I should build a component with more basic components if I want such fine-grained control over colors?
try this:
styleOverrides: {
root: {
'&.Mui-focused': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'green',
},
},
'&.Mui-error': {
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'red',
},
},
},
}
Related
I'm trying to change the default severity backgroundColor for the Alert component from MUI5 to give every severity my custom background color.
I want to do it with a theme update so the changes will apply to all the components using it but only in this case couldn't find the way to do so.
the component: Alert MUI
here is how it looks in dev tools
I tried to override it with:
MuiAlert: {
styleOverrides: {
root: {
filled: {
filledSuccess: {
backgroundColor: "grey",
}
},
}
},
},
and with:
MuiAlert: {
styleOverrides: {
filledSuccess: {
backgroundColor: "grey",
},
},
},
I define theme for typography but font family of Mui buttons, don't change.
typography: {
fontFamily: ["Baloo Bhaijaan 2", "cursive"].join(", "),
button: {
fontFamily: "Baloo Bhaijaan 2",
fontWeight: 500,
color: "#ffffff !important",
},
},
This modified example is provided in the MUI docs for customizing components in Material-UI version 5:
const theme = createTheme({
components: {
// Name of the component
MuiButton: {
styleOverrides: {
// Name of the slot
root: {
// Some CSS
fontFamily: "Baloo Bhaijaan 2",
fontWeight: 500,
color: "#ffffff !important"
},
},
},
},
});
I want to change the hover color to red. Wrote a topic for this element does not respond, how to fix it? it turns out it goes dark by default, I want to change it to another color, for example, red, but it doesn't work
MuiOutlinedInput: {
styleOverrides: {
root: {
"& $notchedOutline": {
borderColor: "#ff0000",
},
"&:hover $notchedOutline": {
borderColor: "#ff0000",
},
"&$focused $notchedOutline": {
borderWidth: 0,
},
},
},
},
import OutlinedInput from "#mui/material/OutlinedInput";
const Search = () => {
return (
<>
<OutlinedInput />
</>
);
};
export default Search;
You can do it like this:
const theme = createTheme({
components: {
MuiOutlinedInput: {
styleOverrides: {
root: {
"&:hover .MuiOutlinedInput-notchedOutline": {
borderColor: "#ff0000"
},
"&.Mui-focused .MuiOutlinedInput-notchedOutline": {
borderColor: "#ff0000"
}
}
}
}
}
});
Working example
$notchedOutline doesn't work for me.
i have tried everything to override mui checkbox and radio from theme with no luck
components: {
...
MuiCheckbox: {
styleOverrides: {
root: {
color: pallette.lightBlack,
},
colorSecondary: {
'&$checked': {
color: pallette.lightBlack,
},
},
},
},
MuiRadio: {
styleOverrides: {
root: {
color: pallette.lightBlack,
},
colorSecondary: {
'&$checked': {
color: pallette.lightBlack,
},
},
},
},
So far not able to make that work only from sx prop like this
<Radio
sx={{
'&, &.Mui-checked': {
color: pallette.lightBlack,
},
}}
/>
I was dealing with this issue too using MUI v5.8
In order to override the styled for the radio both checked and unchecked, something like this worked for me.
MuiRadio: {
styleOverrides: {
root: {
color: palette.secondary,
"&.Mui-checked": {
color: palette.secondary,
}
}
}
}
The & allows you to select the Mui-checked class. This can be used in many places when overriding the styles. Check the assigned classes for the components your are looking to override.
You might misspelled palette. Try changing pallette to palette.
I have a TextField: https://mui.com/components/text-fields/
<TextField
fullWidth
type={'email'}
variant={'standard'}
label={'Email'}/>
My background is dark so I'm trying to override the default colours using my theme. I have been able to change the text color and the bottom border when in focus to white but I cannot figure out how to change the bottom border to white when out of focus.
Not in focus:
In Focus:
Here is what my theme looks like:
const lightTheme: ThemeOptions = createTheme({
palette: {
primary: {
main: '#ffffff',
},
},
typography: {
allVariants: {
color: 'white'
},
},
components: {
MuiInputBase: {
styleOverrides: {
input: {
color: 'white',
}
}
}
}
});
I'm also having a hard time finding documentation on which styles are available and what they do in the Material UI docs. Perhaps in addition to helping me solve this particular problem someone can point me to a good spot in the docs for references whenever I want to change the styles on any Material UI component.
If you inspect and check the style through the browser, then you will realize the border bottom is applied for the ::before pseudo element MuiInput-root class.
Like I said, I guess it will work if you pass the same to the pseudo element into your theme.
const lightTheme: ThemeOptions = createTheme({
palette: {
primary: {
main: '#ffffff',
},
},
typography: {
allVariants: {
color: 'white'
},
},
components: {
MuiInputBase: {
styleOverrides: {
input: {
color: 'white',
'&::before': {
border-bottom: 1px solid rgba(0, 0, 0, 0.42); // use your color
}
}
}
}
}
});