CODEWITHSUNDEEP
cssreactjsfrontendmaterial-uistyled-components
xxddoo
xxddoo

Reputation: 821

change style of material-ui checkbox

I am using React for my project and styled-component package for styling, but I have problem with styling the Material-ui checkbox with styled-component. I need to narrow the border of checkbox, but I can't find any interface of the Material-ui for styling the border width.

This is my current code:

const StyledCheckbox = styled(Checkbox)`
  svg{
    color: #CDCDCD;
    font-size: 30px;
  }
`

for styling the svg of checkbox component. I don't know which props of svg deal with the border width of the svg. I have tried some props like font-weight, border-width, but they both doesn't work.

Codesandbox button: Edit vv50o01x2l

expected result:

enter image description here

current result:

enter image description here

Upvotes: 5

Views: 10773

Answers (1)

Deve
Deve

Reputation: 1779

I think the good way is to pass a new icon in prop icon of Checkbox.

 <StyledCheckbox
    checked={checked}
    onChange={onChange}
    color="primary"
    icon={<CustomIcon />}
    {...others}
 />

<CustomIcon /> could be:

  • custom svg with exact style you need.
  • React/Styled component with css ( that could be a div with border, borderRadius, width, height properties).

Doc: https://material-ui.com/api/checkbox/#props

Upvotes: 3

Related Questions