TypeError：无法读取未定义的属性（读取“主”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'main')TypeError：无法读取未定义的属性（读取“主”）
【发布时间】：2021-11-26 11:33:52
【问题描述】：

当我尝试运行以下代码时出现上述错误...在使用 Material-UI 代码工作正常之前。我需要颜色单选按钮，因此我将 Material-UI 添加到我的项目中。在终端中编译成功，但无法在浏览器中运行。任何类型的帮助将不胜感激

import Radio from '@mui/material/Radio';

const GeneralComponent = () => {

  
  const [selectedValue, setSelectedValue] = React.useState('a');


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

  const controlProps = (item) => ({
    checked: selectedValue === item,
    onChange: handleChange,
    value: item,
    name: 'color-radio-button-demo',
    inputProps: { 'aria-label': item },
  });
return(

 <Radio  {...controlProps('a')} color="success" />
      <Radio {...controlProps('b')} color="yellow" />
      <Radio {...controlProps('c')} color="red" />
      <Radio {...controlProps('d')} color="default" />
      <Radio
        {...controlProps('e')}
        sx={{
          color: pink[800],
          '&.Mui-checked': {
            color: pink[600],
          },
        }}
      />

);
}

【问题讨论】：

标签： reactjs button material-ui radio

【解决方案1】：

但我自己解决了我们也可以传递无效（任何颜色）的颜色......但不能直接通过以下方式

{...controlProps('e')}
        sx={{
          color: anycolor[800],
          '&.Mui-checked': {
            color: anycolor[600],
          },
        }}

这样

【讨论】：

【解决方案2】：

'red'、'yellow' 或 'default' 是无效的 color 值 Radio。 prop 默认只能接受以下值：

'默认' | '基本的' | '次要' | '错误' | '信息' | '成功' | '警告' |字符串

有关参考，请参阅Radio API here。如果要扩展颜色，请参阅this 答案，它适用于所有具有color 属性的MUI 组件。

【讨论】：

嘿解决了......我应该像这样使用单独使用颜色....{...controlProps('e')} sx={{ color: anycolor[800], ' &.Mui-checked': { color: anycolor[600], }, }}
@unknown 也可以，但是从长远来看，定义自定义颜色然后在每个 Radio 按钮中声明它会更方便，而不必覆盖每个 Radio 中的样式你有。