0

I just started using material-ui design with ReactJS. I am struggling to change a checkbox style that is being shown under <TableRow /> component. (Table component)

I've already tried using css to style checkbox. It looks like material-ui has own checkbox logic using div and svg and hiding native checkbox element setting opacity to 0.

Any idea how it can be achieved ?

Improve this question

2 Answers 2

Reset to default
1

Material UI really does that. The native checkbox element does not accept many properties for styling, so for better looks it uses other elements. What you need to do to customize a Material UI checkbox is to apply styles for those elements.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

There is no elegant way to customize the checkbox in a selectable Table. However, you can customize the Checkbox component, as shown in the docs with heart icons and such. So, as a workaround, you could set your Table to be selectable={false}, and add your own custom column that contains customized Checkbox components. You'll then have to maintain your own selected state(s) and Select All functionality, if you need it.

Improve this answer

2 Comments

Thanks for the solution! It seems to me the only way to get it done as well. I was looking into a generic way to not change the entire logic. Could provide me a link where is that example with heart icon ?
Can't get URL from my current location, but it's in material-ui's docs, in Components -> Switches -> Checkbox

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.