The use of theme in the makeStyles isn't really done right... should use main color from a palette and a contrast color for the text... you can add multiple palettes to your theme injection. then, you only need to specify the palette to use for the button. As for the spacing, you shouldn't hard-code px, you should use either relative to the font (em, etc) or use theme.spacing() method to generate the spacing string.
Instead of `padding: "20px 10px"`
use `padding: theme.spacing(2, 1)`
If you take the time to actually read through the documentation for material-ui, there is a lot in the box to use. Overriding styles is not the best idea and material-ui is meant for creating applications, the more you lean on the component library, the less friction you will see in your application.
You should mount your theme under your state management (redux), this way you can have your theme driven from state (dark mode, primary/secondary colors, etc) or otherwise by configuration. If you leverage the ThemeProvider with makeStyles or withStyles, it will absolutely apply globally... you can extend the theme object for your provider by adding additional attributes and palettes beyond primary/secondary... it's only that the main components expect primary/secondary, you can add additional features and leverage them throughout your application.
tracker1 1633 days ago. link 1 point ▲ ▼