TypeError: Cannot read properties of undefined (reading 'main')

Question

当我尝试运行我的下面的代码时出现上述错误...在使用 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],
          },
        }}
      />

);
}

Answer 1

'red'、'yellow' 或 'default' 不是 Radio 的有效 color 值。该道具默认只能接受以下值：

'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string

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

Answer 2

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

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

这样

TypeError: Cannot read properties of undefined (reading 'main')

TypeError: Cannot read properties of undefined (reading 'main')

button

radio

reactjs

material-ui