Настроить цвета радиокнопок пользовательского интерфейса отдельных материалов

Question

Я пытаюсь настроить каждую радиокнопку (UI материала) в группе, чтобы она имела другой цвет.

Я могу изменить цвет каждой радиокнопки до того, как они будут проверены, но независимо от того, что я делаю они всегда принимают цвет secondary, когда они выбраны.

Код, который делает их правильным цветом, когда они не выбраны, приведен ниже:

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);

Я пробовал использовать

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

, что не имело значения.

Я пробовал

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

, что тоже не сработало

И теперь я в тупике .. . Я новичок в React и CSS (все самоучки в этой пандемии c), поэтому, пожалуйста, включите некоторые аргументы в свой ответ, чтобы я мог понять, почему мой не работал.

Answer 1

Привет, вы можете использовать другой цвет, например default, primary или secondary. или даже вы можете использовать собственное радио, используя withStyles. Пожалуйста, проверьте пример ниже:

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>
    );
}

Подробнее