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

Question

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

);
}

Answer 1

But I solved it by myself we can pass invalid (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