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?