I'm getting above error when I try to run my below code... before using Material-UI code was working fine.. I need color radio buttons so I added Material-UI into my project. In terminal its compiling successfully but not able to run in a browser. Any type of help will be appreciate

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],
          },
        }}
      />

);
}

CodePudding user response：

But i sloved by my self we can pass inavalid(any color) colors too...but not directly in the below way

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

in this way

CodePudding user response：

'red', 'yellow' or 'default' are not valid color values of the Radio. The prop can only accept the following value by default:

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

For reference, see the Radio API here. If you want to extend the color, see this answer, it applies to all MUI components with the color prop.