Decrease the components size of Material UI

Question

I've been trying to figure out a way to decrease the fontSize to all the components set (http://www.material-ui.com/#/components), they are too big for my taste, so I started creating a selectable list and using styles trying to decrease the fonts and sizes but I'm seeing isn't that easy.

I've started with List and ListItem, I was able to reduce all the elements except the rightToggle element, I'm not seeing a way to override its style.

Also I couldn't change the secondaryText font size.

Is there a specific approach to achieve this without to much pain?, I'm seeing there are a lot of "magic" numbers hardcoded for the paddings and positioning, wouldn't be better make them overridable?

Thanks

Answer 1

Even though MUI uses the inline-style approach, it is a good idea to use a CSS file to provide some global styles. Our MUI project uses a "main.css" file to set anchor color, bg color, and several other attributes that we know will be consistent across the app.