CODEWITHSUNDEEP
reactjsmaterial-ui
Boris Boskovic
Boris Boskovic

Reputation: 342

Material UI: Change color of unchecked radio button

In my React app I'm using Material UI radio buttons, and I want to change their color to my custom theme color. For that I'm using ThemeProvider from '@material-ui/core/styles'. So here's the theme object

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#F6A500',
            light: '#F6A500',
            dark: '#F6A500',
        },
    }
});

And here is how I use it.

<ThemeProvider theme={theme}>
    <RadioGroup value={sourceOption} onChange={(e, v) => setSourceOption(v)} row>
        <FormControlLabel value="0" control={<Radio color="primary" />} label="Mobilni" />
        <FormControlLabel value="1" control={<Radio color="primary" />} label="Web" />
        <FormControlLabel value="2" control={<Radio color="primary" />} label="Svi" />
    </RadioGroup>
<ThemeProvider>

The problem is, color is applied only to checked radio button and not to the rest of them. enter image description here

Any sugestions?

Upvotes: 2

Views: 4657

Answers (1)

alisasani
alisasani

Reputation: 2968

you can modify the color of radio buttons by changing the color attribute of root className of the radio button as below:

const GreenRadio = withStyles({
  root: {
    color: green[400],
    "&$checked": {
      color: green[600]
    }
  },
  checked: {}
})((props) => <Radio color="default" {...props} />);



<GreenRadio
        checked={selectedValue === "c"}
        onChange={handleChange}
        value="c"
        name="radio-button-demo"
        inputProps={{ "aria-label": "C" }}
      />

sandbox

Upvotes: 1

Related Questions