2

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

);
}
Jonas
  • 121,568
  • 97
  • 310
  • 388
Naziya
  • 39
  • 1
  • 6

2 Answers2

2

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

Roger
  • 1,004
  • 2
  • 12
  • 24
Naziya
  • 39
  • 1
  • 6
0

'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.

NearHuscarl
  • 66,950
  • 18
  • 261
  • 230
  • hey solved ...instade of using color separately i should use like this....{...controlProps('e')} sx={{ color: anycolor[800], '&.Mui-checked': { color: anycolor[600], }, }} – Naziya Oct 06 '21 at 10:35
  • @unknown that'd work too, but defining a custom color then declare it in every `Radio` button is more convenient in the long run, instead of having to override the styles in every `Radio` you have. – NearHuscarl Oct 06 '21 at 11:24