单选图标在选择时消失 - 使用 Material UI答案

【问题标题】：Radio icon disappears on selection - using Material UI单选图标在选择时消失 - 使用 Material UI
【发布时间】：2021-08-07 15:27:50
【问题描述】：

我使用了 Material UI 的 RadioGroup 组件。选择单选按钮时，单选图标（圆形）消失，只保留标签。

const [env,setEnv]=React.useState('Development')

<Grid container spacing={3}>
  <Grid item xs={3}>
    <Card className={classes.card} elevation={1}>
      <CardContent>
        <form noValidate onSubmit={handleSubmit}>
          <FormControl >
            <FormLabel >Select Environment</FormLabel>
            <RadioGroup value={env} onChange={(e) => setEnv(e.target.value)}>
              <FormControlLabel value='Development' control={<Radio />} label="Development" />
              <FormControlLabel value='Stage' control={<Radio />} label="Stage" />
              <FormControlLabel value='Production' control={<Radio />} label="Production" />
            </RadioGroup>
          </FormControl>
        </form>
      </CardContent>
    </Card>
  </Grid>
</Grid>

【问题讨论】：

我已经在一个示例表单中测试了你的代码，完全没问题，只要确保你关闭了父 Grid..
对多个文件的依赖。将很难包括在内。但是，我只是尝试在 RadioGroup 中添加背景颜色，然后我就可以查看它了。所以当我点击它时，它会变成完全白色，然后消失。还在调试中...
@VaibhavGidde 谢谢。所以，看起来可能是一些继承的 css 造成了问题。虽然不确定
如果有css问题，试试卡片组件类的zIndex属性
@VaibhavGidde - 我采用了覆盖收音机图标主题的方法。

标签： reactjs material-ui radio-group

【解决方案1】：

我试过这样：我是这样做的：

const theme = {
  overrides: {
    MuiRadio: {
      root: {
        color: 'green',
      },
      colorSecondary: {
        '&$checked': {
          color: 'green',
        },
      },
    },
  },
}

const muiTheme = createMuiTheme(theme)

我现在可以根据需要更改单选图标的颜色 :)

【讨论】：