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

user_10457020 0
Viewed 2039

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

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

Right now I have this:

Radio button 1

But what I would like to get is

Radio button 2

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

material-ui reactjs css
2 Answers

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

    Radio button with thick border

    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:

    DOM representation of both SVG elements of the radio buttons

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:

enter image description here

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}
/>
user_32106770

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 :)

user_175134690
Related