The color
prop can only take three values (default, primary, secondary) but what if I want my radio to be green for example ?
So I tried overriding with classes
prop like so :
const styles = theme => ({
radio: {
colorPrimary: {
'&$checked': {
color: 'blue'
}
},
checked: {},
}
})
And then inside the component :
<FormControlLabel
classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
value="week"
control={<Radio disableRipple classes={{colorPrimary: classes.radio}} />}
label="Every week (Monday at 12:00)"
/>
But this is not working.
Found a solution :
const styles = theme => ({
radio: {
'&$checked': {
color: '#4B8DF8'
}
},
checked: {}
})
And inside the component:
<FormControlLabel
classes={{root: classes.formControlLabelRoot, label: classes.formControlLabel}}
value="day"
control={
<Radio
disableRipple
classes={{root: classes.radio, checked: classes.checked}}
/>
}
label="Every Day (at 12:00)"
/>
You must add the root
key.
I think you need to use colorSecondary class key instead of colorPrimary because the radio button has color of secondary as default
also you can override the default values for primary and secondary and default colors using createMuiTheme and MuiThemeProvider component in your root component you can
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import Button from '@material-ui/core/Button';
const theme = createMuiTheme({
palette: {
primary: { main: purple[500] }, // Purple and green play nicely together.
secondary: { main: '#11cb5f' }, // This is just green.A700 as hex.
},
});
function App() {
return (
<MuiThemeProvider theme={theme}>
<div>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
</div>
</MuiThemeProvider>
);
}
export default App;
as you can see in the example below you just wrap your components with MuiThemeProvider and every component now will have new primary and secondary color
check this link from material-ui website for more information Themes
I have a different solution, for a project-wide theme.
const theme = {
overrides: {
MuiRadio: {
root: {
color: 'green',
},
colorSecondary: {
'&$checked': {
color: 'green',
},
},
},
},
},
const muiTheme = createMuiTheme(theme)
<ThemeProvider theme={muiTheme}>
// rest of app goes here
</ThemeProvider>
This way, all Material-UI Radio elements in the app have a green outer circle, and are also a green circle inside when checked.
You can use the sx
prop in MUI v5 to style the checked and uncheck states like below:
<Radio
{...props}
sx={{
'&, &.Mui-checked': {
color: 'magenta',
},
}}
/>
If you want to use a custom color in color
prop, you can extend the palette in createTheme()
:
const { palette } = createTheme();
const theme = createTheme({
palette: {
pinky: palette.augmentColor({ color: pink }),
summer: palette.augmentColor({ color: yellow }),
},
});
Then use it like this in your component:
{/* pre-defined color */}
<Radio {...props} />
<Radio {...props} color="secondary" />
<Radio {...props} color="success" />
<Radio {...props} color="default" />
{/* custom color */}
<Radio {...props} color="pinky" />
<Radio {...props} color="summer" />
For anyone looking to do this with a styled component
import { withStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';
const CssRadio = withStyles({
colorSecondary: {
color: '#FFFFFF',
'&$checked': {
color: 'hotpink',
},
},
checked: {}
})(Radio)
In the latest MUI (v5.6.4 at the moment of writing this), you can apply style overrides on the theme level, if you want to change the colors everywhere the Radios are used in the application. For example, this is how I've overridden the styles for the Radio, and a few other components:
import { createTheme, checkboxClasses, radioClasses, ThemeOptions } from "@mui/material";
import { FONT_FAMILY } from "shared/src/theme/typography";
import palette from "shared/src/theme/palette";
const themeObj: Partial<ThemeOptions> = {
typography: { fontFamily: FONT_FAMILY, fontSize: 16 },
components: {
MuiRadio: {
styleOverrides: {
root: {
color: `var(--neutrals-800, ${palette.neutrals["800"]})`,
[`&.${radioClasses.checked}`]: {
color: `var(--secondary-500, ${palette.secondary["500"]})`,
},
},
},
},
MuiCheckbox: {
styleOverrides: {
root: {
fontSize: "0.94rem",
color: `var(--neutrals-800, ${palette.neutrals["800"]})`,
[`&.${checkboxClasses.checked}`]: {
color: `var(--secondary-500, ${palette.secondary["500"]})`,
},
},
},
},
MuiFormControlLabel: {
styleOverrides: {
root: {
color: `var(--text-secondary, ${palette.text.secondary})`,
},
},
},
},
};
export const theme = createTheme(themeObj);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.