Global Styles with React and MUI

Question

I'm new to React and MUI but I have to write an enterprise application with a nice styling. I would like to use some kind of global styles for my application (to be able to change it later on ) with functional components in react (maybe I will later add redux).

What's the best practice approach for global styles with react and material (latest versions)?

What about this one (ThemeProvider): https://material-ui.com/styles/advanced/? I read about MuiThemeProvider but could not find it in the material version 4 documentation. Is it obsolete? What's the difference between MuiThemeProvider and ThemeProvider?

React (client side rendering) & Material (latest versions) Backend: Node

Answer 1

You can actually write global styles with material UI:

const useStyles = makeStyles((theme) => ({
    '@global': {
        '.MuiPickersSlideTransition-transitionContainer.MuiPickersCalendarHeader-transitionContainer': {
            order: -1,
        },
        '.MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter': {
            fontWeight: 'bold',
        }
    }
}));