引入Material-UI后报Cannot read properties of undefined (reading 'main')错误求助

报错原因 #

• 传入了非法的color属性值：MUI Radio组件的color属性仅支持default、primary、secondary、error、info、success、warning几类预设值，代码中传入的yellow、red不属于内置色值，MUI会自动到主题配色中读取yellow.main、red.main，找不到对应配置就抛出该错误。
• JSX缺少根节点：React要求组件返回的JSX必须有唯一根容器，代码中return直接并列多个Radio组件，会触发语法错误。
• 颜色变量未导入：sx属性中使用的pink色值变量未提前从MUI颜色包导入，也会触发未定义报错。

修复后的完整代码 #

import React from 'react';
import Radio from '@mui/material/Radio';
import pink from '@mui/material/colors/pink';

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')} 
        sx={{
          color: '#f5c518',
          '&.Mui-checked': {
            color: '#f5c518',
          },
        }}
      />
      <Radio 
        {...controlProps('c')} 
        sx={{
          color: '#d32f2f',
          '&.Mui-checked': {
            color: '#d32f2f',
          },
        }}
      />
      <Radio {...controlProps('d')} color="default" />
      <Radio
        {...controlProps('e')}
        sx={{
          color: pink[800],
          '&.Mui-checked': {
            color: pink[600],
          },
        }}
      />
    </>
  );
}

内容的提问来源于stack exchange，提问作者Naziya