The Material-UI Docs are often thorough and have many links to live code examples. However, while reading about StylesProvider I was unable to find live examples for many of the props. In this post I’ll show the effects of various settings for each prop.
***UPDATE for MUI 5: Material-UI moved to a new styling API where styling is applied using the sx prop. If you are using MUI v5, simply write the styling code directly in the sx prop instead of using makeStyles and classes. I’m working on updating all my articles, but until I’m finished you can read my guide to the MUI sx prop to learn more.
I’ll include screenshots and relevant React code throughout. A Code Sandbox link with full React code is in the Resources section.
As info, some of the MUI docs mention StylesProvider in passing while discussing a different feature. Here’s a list of links:
Material-UI also has a ThemeProvider, which you can read about here, but it serves a very different role than StylesProvider.
My MUI course on Udemy is now available!!! Build a full MUI app from beginning to end, learn every aspect of the sx prop, styled API, and the theme, and tackle the most challenging components! Do you want an active Q&A with me?!? Check here for coupons for my MUI course on Udemy.
Styles Provider Disable Generation Prop
The disableGeneration prop is an off-switch for all styling that Material-UI attempts to provide for components. It will disable default styling and specific styles applied via classes for a prop. It did not disable styling applied by inline styling.
Take a look at the image below. On the left are a few heavily customized typography components and an AppBar that I took from previous articles I wrote. They are not wrapped in a StyleProvider, and so of course the stylings are not disabled.
On the right are the same components, but they are wrapped in a StylesProvider and disableGeneration is true.
The wrapping code is below:
<StylesProvider disableGeneration={true}>
//...component JSX
</StylesProvider>When we look at dev tools, we see all the elements generated by MUI are present but they have been completely stripped of styling:
Why would you want to disable generation of styling? The docs suggest that it speeds up DOM traversal, for example in a bug fixing or research situation. However, I expect you wouldn’t want this enabled with production code.
Styles Provider Inject First Prop
The injectFirst prop is a critical prop to be aware of if you want to be an expert in styling Material-UI components. According to the docs:
By default, the styles are injected last in the
MUI Docs<head>element of the page. As a result, they gain more specificity than any other style sheet. If you want to override Material-UI’s styles, set this prop.
There are times when styling Material-UI can be very challenging. The default styles can be very persistent. However, In my experience I have always found a solution from the styling API, overrides, or styled components.
If you did run into a situation where the default styling was simply too persistent or could not be overridden, consider enabling injectFirst. This will set MUI styling to be injected earlier in the load cycle and therefore default styles will have less specificity than styles injected later that you added.
I attempted to prove this out with a styled component. This is exactly the situation where the docs suggest you might need to enable injectFirst. My code is below:
const StyledTypography = styled(Typography)`
letter-spacing: 2px;
`;
//In the return statement
<StylesProvider injectFirst={true}>
<StyledTypography component="div">
<Box mt={1} ml={1}>
Letter Spacing 2px
</Box>
</StyledTypography>
</StylesProvider>In theory, when using the above styled component then I need injectFirst={true}. However, even when I set it to false the results were the same.
It is quite possible that Code Sandbox is affecting the injection order. This is a good tool to keep in reserve, but as I mentioned above, I’ve never actually needed it (and I’ve styled a lot of MUI components). **Update: here’s an example with Styled Components where injectFirst is effective.
Styles Provider Generate Class Name Prop
The generateClassName prop gives some interesting options for customizing how generated class names look in production. To explain this further, classes that you create get transformed a bit by MUI before being applied to elements in the DOM. Classes will be suffixed with a string to make them random, for example.
generateClassName allows some control over this. It’s really just a pass-through prop for createGenerateClassName, and I suggest you read about the props available.
In my example, I added a prefix string for all classes via the seed prop:
const generateClassName = createGenerateClassName({
seed: "1234"
});
//In the return
<StylesProvider generateClassName={generateClassName}>
<JSSedButton />
</StylesProvider>Now any classes generated on children components wrapped in this StylesProvider will be prefixed with ‘1234’.
Styles Provider JSS Prop
The jss prop is similar to generateClassName: it is a prop that doesn’t visibly impact prod but can be very useful for developers.
jss allows for customizations of how JSS is written. Take a look at my example below. I enabled the jss plugin jss-plugin-expand. This plugin allows for complex styles like border to be expanded into an object format and read more easily.
//Inside the wrapper component
import expand from "jss-plugin-expand";
const jss = create({
plugins: [...jssPreset().plugins, expand()]
});
<StylesProvider jss={jss}>
<JSSedButton />
</StylesProvider>
//Inside JSSedButton
const useStyles = makeStyles((theme) => ({
fullBorder: {
border: {
color: "blue",
width: 1,
style: "solid"
}
}
}));In particular, see the fullBorder class in JSSedButton. Without this plugin, this syntax would not compile.
Here’s the button I created with this styling:
There are quite a few other plugins options. Take a look at the list here. Also, here is a great resource on JSS syntax.
Resources
The Styles Provider allows for powerful customizations. Usually I aggregate links in the Resources section, but this time there were too many. Be sure to read through the article for lots of excellent additional resources.
