Mui Radio filled color

user_10915431 0
Viewed 400

I am using Mui for styling a website I am working on. I was wondering if anyone had any insight on how to style a radio button so it is completely filled with one color while selected. This has to work with Mui Radio buttons.

Let me provide an example of how it should look.

I want it to look like the first radio.

I want it to look like the first radio button. It currently looks like the 4th in Mui.

I am also needing to do this with styled components.

material-ui styled-components reactjs css
1 Answers

You can change the default icon by providing a different icon in the checkedIcon props (You can use Lens icon to achieve the first button). There are other icons as well at here. Pick the one you need

import Lens from "@material-ui/icons/Lens


return (
   <Radio
          value="example"
          label="example"
          checkedIcon={<Lens></Lens>}
        />
   )
user_144800380
Related