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.
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'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',
},
},
},
}
I know the basics with MUI's createTheme and changing component defaults like Typography, but how do I select classNames? In my situation, I want to only create themes for specific Typography/Grids in tandem with breakpoints, but there's no clear example of changing target components in the docs. Here's what I have so far:
let theme = createTheme({
typography: {
fontFamily: "Inter, sans-serif",
color: "#212b37",
h5: {
fontSize: 40,
},
body: {
fontSize: 18,
},
},
root: {
sample_class: {
fontSize: 40,
}
}
});
I saw the docs mentioned root so I just winged it and added sample_class thinking that'll select the element with the same className.
Just for reference, I'm using MUI version ^5.0.0-rc.1.
Perhaps you can try something like this in createTheme:
Solution 1:
MuiTypography: {
styleOverrides: {
h6: ({ ownerState }) => (ownerState.className === "MyClass" ? { color: "red" } : {}),
},
},
where "MyClass" is the name of the class you want to apply theme stylings to.
Solution 2:
This is cleaner.
MuiTypography: {
styleOverrides: {
h6: {
'&.MyClass': { color: 'red' },
},
},
},
Then you can do this with your Typography element:
<Typography variant="h6" className="MyClass">Hello world</Typography>
If you have VS Code, you can Command+Click until you get to the TypographyClasses interface, which gives you a full list of typography classes to override.
Here are some links of ownerState which can help on component overriding:
https://mui.com/customization/theme-components/
https://mui.com/customization/unstyled-components/
This was also my solution for trying to style another component, such as the MuiAccordion, but I didn't want to override the existing variants since they had their own default styles.
I am migrating from material-ui 4 to mui 5 and I want to override MuiInputLabel in theme override.
This is what I have done already is:
'MuiInputLabel': {
'styleOverrides': {
'marginDense': {
'lineHeight': '1.5px',
'fontSize': typography.caption.fontSize,
},
'outlined': {
'transform': 'translate(1.4rem, 0.9rem) scale(1)',
'&.marginDense': {
'&.shrink': {
'transform': 'translate(15px, 0px) scale(1.05)',
'fontSize': '11px !important',
},
},
},
}}
I have tried changing the names of the props, but something is off, although the root styles are being applied but the outlined object's transform property is what I want to be applied.
In the current scenario the outlined and marginDense are not being applied but if I put them inside the defaultProps object the MuiInputLabel-outlined class appears in DOM but I cannot see the styles for it in the browser.
If anyone is still interested how to do this, this is how it should be done:
MuiInputLabel: {
styleOverrides: {
root: {
fontSize: '0.95rem',
},
shrink: {
transform: 'translate(14px, -8px) scale(1) !important',
},
outlined: {
transform: 'translate(14px, 16px) scale(1)',
},
},
},
shrink is the part where input is focus or has some value, outlined is the default state with empty input
I am using material ui DateRangePicker and want to customize MuiPickersDesktopDateRangeCalendar style. But I am unable to override this with global theme as this is not recognized in ThemeOptions with typescript.
I tried to override from this reference (https://next.material-ui-pickers.dev/guides/css-overrides), but I am getting below error "..is missing the following properties from type 'ThemeOptions': MuiPickersDesktopDateRangeCalendar, MuiPickersDay"
Option 1:
interface Theme {
//for typescript usage, I think it should go inside overrides, but there is no overrides option supported
MuiPickersDesktopDateRangeCalendar: {
arrowSwitcher: {
padding: React.CSSProperties['padding']
},
calendar: {
minWidth: React.CSSProperties['minWidth']
minHeight: React.CSSProperties['minHeight']
},
},
MuiPickersDay: {
root: {
width: React.CSSProperties['width']
height: React.CSSProperties['height']
},
},
}
interface ThemeOptions {
//for typescript usage, I think it should go inside overrides, but there is no overrides option supported
MuiPickersDesktopDateRangeCalendar: {
arrowSwitcher: {
padding: React.CSSProperties['padding']
},
calendar: {
minWidth: React.CSSProperties['minWidth']
minHeight: React.CSSProperties['minHeight']
},
},
MuiPickersDay: {
root: {
width: React.CSSProperties['width']
height: React.CSSProperties['height']
},
},
}
const theme = createMuiTheme({
overrides: {
MuiPickersDesktopDateRangeCalendar: {
arrowSwitcher: {
padding: '0.8rem 0.8rem 0.4rem 0.8rem',
},
calendar: {
minWidth: '20rem',
minHeight: '19rem',
},
},
MuiPickersDay: {
root: {
width: '1.4rem',
height: '1.4rem',
},
},
},
})
Option 2: There is no need to declare in theme interface, and upgrade #material-ui/core/styles to any specific version. I tried that as well, but it is not working.
Please let me know if there is any compatible version of "#material-ui/core/styles" with "#material-ui/pickers": "^4.0.0-alpha.12".