How to change border color of radio button in Material-UI?

Question

I want to change outer ring of Material UI radio button.

https://material-ui.com/components/radio-buttons/

Right now I have this:

But what I would like to get is

I have tried to style PrivateRadioButtonIcon-layer class in blue, and MuiSvgIcon-root in black, but I can't find a way to style PrivateRadioButtonIcon-layer

Answer 1

I describe two solutions (both applicable to MUI v5):

1. CSS-only solution to change the color of border and circle separately.
2. Solution with custom icon in order to design it as you please.

CSS only solution

If you only want to change the border color as stated in the question title (and not the thickness of the border) you can do the following in MUI 5 (via the sx prop):

1. Style the border via the selector '& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)' which uses the CSS general siblings combinator to only select the first occurance of the MuiSvgIcon-root class.
2. Style the circle via the selector '& .MuiSvgIcon-root + .MuiSvgIcon-root' which uses the CSS adjacent sibling combinator (+) to access the second svg.

Entire code of Radio button:

<Radio
    {...otherRadioProps}
    sx={{
        '& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root)':
            {
                color: 'red',
            },
        '& .MuiSvgIcon-root + .MuiSvgIcon-root': {
            color: 'blue',
        },
    }}
/>

Notes:

1. Thickness of border: We cannot make the border thinner (as your design suggests) but we can make the border thicker via CSS alone. We have to access the path element inside the SVG of the surrounding border of the radio button. Add the following to the sx prop:

   '& .MuiSvgIcon-root:not(.MuiSvgIcon-root ~ .MuiSvgIcon-root) path':
       {
           stroke: 'red',
           strokeWidth: 3,
       },
   

   

   Note that you need the stroke: 'red', line even though you set color: 'red' on the .MuiSvgIcon-root element.

2. We cannot target the circle directly with a class name because Material UI gives the border and the circle the same class name as you can see in this screenshot from Firefox DevTools:

   

Solution with custom icon and checkedIcon component

If you want a thinner border you have to add own SVG icons via the icon and checkedIcon props. To get the following:

you can use the following icon component:

const RadioButton = ({ checked }) => (
    <svg
        width="38px"
        height="38px"
        viewBox="0 0 24 24"
        fontSize="38px">
        <circle
            cx="50%"
            cy="50%"
            r="11px"
            stroke="red"
            stroke-width="1px"
            fill="none"
        />
        {checked && (
            <circle
                cx="50%"
                cy="50%"
                r="6px"
                fill="blue"
            />
        )}
    </svg>
);

and use it in your MUI Radio component like this:

<Radio
    icon={<RadioButton />}
    checkedIcon={<RadioButton checked />}
    {...otherProps}
/>

Answer 2

1 - This is material UI tag which you are using:-

<FormControlLabel value="" control={<Radio />} label="" />

2 - give className to it and also style on Radio tag like this:-

<FormControlLabel className="targetInsideOfRadio" value="" control={<Radio style={{color:"#979797"}} />} label="" />

3 - go to custom.css file and add like this:-

.targetInsideOfRadio > span > span > div > svg ~ svg > path {
     color: #2149b9;
 }

4 - Hope you get the Answer :)