CODEWITHSUNDEEP
cssreactjsmaterial-uistyled-components
Marco Chavez
Marco Chavez

Reputation: 215

Mui Radio filled color

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.

Upvotes: 2

Views: 1171

Answers (1)

Vo Quoc Thang
Vo Quoc Thang

Reputation: 1396

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

Upvotes: 2

Related Questions