Customise Colours of Individual Material UI Radio Buttons

Question

I am trying to customise each (Material UI) Radio Button in a group to have a different colour.

I can change the colour of each radio button before they are checked, but no matter what I do they always take the secondary colour when they are selected.

The code that makes them the correct colour when they are unselected is below:

const styles = theme => ({
  radio1: {
    color: 'red',
  },
  radio2: {
    color: 'green',
  },
});

class Example extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div>
        <FormControl>
          <FormLabel component='legend'>Radio Group</FormLabel>
          <RadioGroup row value={this.state.radioValue} onChange={this.changeValue}>
            <FormControlLabel
              control={<Radio name="radio1" className={classes.radio1} />}
              label='Radio 1'
              value='radio1'
            />
            <FormControlLabel
              control={<Radio name="radio2" className={classes.radio2} />}
              label='Radio 2'
              value='radio2'
            />
          </RadioGroup>
        </FormControl>
      </div>
    )
  }
}

export default withStyles(styles)(Example);

I have tried using

const styles = theme => ({
  radio1: {
    color: 'red',
    '&$checked': {
      color: 'red',
    },
  },
  radio2: {
    color: 'green',
    '&$checked': {
      color: 'green',
    },
  },
});

which made no difference.

I have tried

const styles = theme => ({
  radio1: {
    root: {
      color: 'red',
      '&$checked': {
        color: 'red',
      },
    },
    checked: {},
  },
  radio2: {
    root: {
      color: 'green',
      '&$checked': {
        color: 'green',
      },
    },
    checked: {},
  },
});

which also didn't work.

And now I'm stumped... I'm fairly new to React and CSS (all self taught in this pandemic) so please include some reasoning behind your answer so I can figure out why mine didn't work.

Try this https://stackoverflow.com/a/50800911/9498804 – Muaz Jan 12 '23 at 17:48 — Muaz, Jan 12 '23 at 17:48

score 0 · Answer 1 · answered May 26 '20 at 19:57

Hi you can use different color like default, primary or secondary. or even, you can use custom Radio using withStyles. Please check below example:

import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import {green} from '@material-ui/core/colors';
import Radio from '@material-ui/core/Radio';

const GreenRadio = withStyles({
    root: {
        color: green[400],
        '&$checked': {
            color: green[600],
        },
    },
    checked: {},
})((props) => <Radio color="default" {...props} />);

export default function RadioButtons() {
    const [selectedValue, setSelectedValue] = React.useState('a');

    const handleChange = (event) => {
        setSelectedValue(event.target.value);
    };

    return (
        <div>
            <GreenRadio
                checked={selectedValue === 'c'}
                onChange={handleChange}
                value="c"
                name="radio-button-demo"
                inputProps={{'aria-label': 'C'}}
            />
            <Radio
                checked={selectedValue === 'd'}
                onChange={handleChange}
                value="d"
                color="default"
                name="radio-button-demo"
                inputProps={{'aria-label': 'D'}}
            />
            <Radio
                checked={selectedValue === 'e'}
                onChange={handleChange}
                value="e"
                color="primary"
                name="radio-button-demo"
                inputProps={{'aria-label': 'E'}}
                size="small"
            />

            <Radio
                checked={selectedValue === 'f'}
                onChange={handleChange}
                value="f"
                color="secondary"
                name="radio-button-demo"
                inputProps={{'aria-label': 'F'}}
                size="small"
            />
        </div>
    );
}

More detail

Customise Colours of Individual Material UI Radio Buttons

1 Answers1