Themes can be changed by changing the theme fed into the Theme Provider (currently used in the layout component).
In the numbered items below, different aspects are controlled by styling in different locations. This is done to utilise differences across themes, shared-styles, and component specific styles. Change the theme above to see the differences in effect.
1
2
3
4
5
6
useSharedStyles: The margin and padding are controlled by a class defined in shared-styles
So it is defined once and consistently applied across themes.
theme.useStyles: The rounded edges and positioning are controled by a class defined in each theme
So each theme can apply vastly different properties and values.
useStyles: The colouring is created by a class defined in this page's component
So that it is only relevant on this page.
style: The rotation for each one is a random value applied directly to the style tag in JSX.
This function is defined in the styles folder and can be used from any component to create JSS classes.
As a useStyles function it inherits the theme by default and can be passed the component's props, so it can use both of these to dynamically alter values in each class.
It is therefore a good place to define styles that should be shared by different components but that can't be applied in the theme settings or its overides.
If using this to change MUI components, consider whether standard methods are more appropriate. Standard methods can allow altering default values, overrides, or adding new variants, etc.Ref: Theme components
This function is defined in each theme and can also be used by any component to create JSS classes.
As a useStyles function it inherits the theme by default and can be passed the component's props, so it can use both of these to dynamically alter values in each class.
Since each theme must be seamlessly interchangeable, any class defined in here must be defined in all themes, however, each theme can implement vastly different properties and values.
This makes it an easier way to create more complex differences between themes that are shared by multiple components.
This function is defined in the component itself.
As a useStyles function it inherits the theme by default and can be passed the component's props, so it can use both of these to dynamically alter values in each class.
This makes it only applicable to a single component, but as most complex elements should be encapsulated into components anyway, this makes it the most common method of definition because it encapsulates the the styles with the component.