How to change Material-ui radio button checked color?
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