Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change MUI Radio button checked color?

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.

like image 209
e_netr Avatar asked Jun 11 '18 14:06

e_netr


3 Answers

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" />

Live Demo

Codesandbox Demo

Related Answer

  • How to add custom MUI palette colors
like image 64
NearHuscarl Avatar answered Sep 30 '22 06:09

NearHuscarl


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.

like image 27
e_netr Avatar answered Oct 09 '22 11:10

e_netr


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

like image 7
mostafa tourad Avatar answered Oct 09 '22 13:10

mostafa tourad