Material UI Styling Best Practices

Question

I'm using Material-UI with React. I have the following approach:

For global styles I'm using the ThemeProvider

    palette: {
        type: 'dark',
        primary: {
            main: '#123',
        },
        secondary: {
            main: '#456',
        },

For local styles (in components) I'm using withStyles:

        const styles = (theme: any) => ({ ... });
        export default withStyles(styles)(UperNavigationBar);

Question 1: My basic idea is to separate colors, fonts etc. (= global styles) etc. from stuff like spacing, alignment etc. (local styles). This way I can easily switch from a light theme to a dark. What do you think about this approach?

Question 2: I have several background colors (default background color, navigation elements have other background color also grids) Then there are hover effects with different background colors etc. But theme.pallette.backgroundColor has only two properties. What's the best way to define further background colors for several components?

Answer 1

I hope it's still relevant.

When it comes to best practices and approaches - I tend to stick to the newest API which is useStyles. About the separation of concerns for styling- in my opinion, it might be very confusing unless it's a global setting. In that case you may want to override it in whatever way explained in the documentation.

I suggest you to first explore the default theme as it really does answer most of your concerns. When changing theme type, you can see that values in the palette will change.

You can override many properties using the theme, and you can also add custom variables. This will help you follow all the specific background colors you have. If you wish these custom colors to match the theme type - simply conditionally apply them.