Examples of Every Material-UI StylesProvider Prop Being Used

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.

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.

If you are looking for training for Material-UI, check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee. The value proposition is simply incredible in this course.

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.

Material-UI StylesProvider disableGeneration prop

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 <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.

MUI Docs

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.

injectFirst true

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’.

StylesProvider generateClassName

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:

StylesProvider jss prop

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.

Check out my review of the best Material-UI course on Udemy, which has 40+ hours of content and a 30-day money back guarantee. The value proposition is simply incredible in this course.

Code Sandbox Link

API Docs Link

Share this post:

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.