[docs] How to use Pigment CSS and Emotion at the same time with Material UI?

[plee-fn]

Related page

https://mui.com/material-ui/customization/theming/

Kind of issue

Missing information

Issue description

How would we use MUI ThemeProvider with Pigment CSS? Is it a case of not using it at all, and we create the theme statically?

Context

We are currently using Material UI v5 and Emotion. We have created a very complex theme and we planning on converting to Nextj.s with Pigment CSS. Currently, we are using the ThemeProvider from @mui/material. Is it possible to move over our current theme and integrate it with Pigment CSS?

Search keywords: MUI ThemeProvider

[brijeshb42]

Are you also using ThemeProvider to target defaultProps on material-ui components ? If yes, then it might not be ready yet for that.
But if you are only applying style tokens and css, then you don't need ThemeProvider. You can just pass your theme as an option to the Pigment CSS configuration in next config and it should work as-is.

[plee-fn]

Thanks! We are mainly using styleOverrides with a few mentions of defaultProps.
i.e.

export const checkboxProps: Partial<CheckboxProps> = {
  disableRipple: true,
  icon: <CheckboxOutline />,
  checkedIcon: <Checkbox />,
  color: 'primary',
};

MuiCheckbox: {
        defaultProps: checkboxProps,
        styleOverrides: {
          root: {
            color: 'var(--color-input-border)',
            background: 'transparent !important', // remove default hover background circle
            padding: '0.5rem !important',
            '& .MuiSvgIcon-root': {
              borderRadius: '0.125rem', // shape icon button to avoid non-shadow square on box-shadow on hover
              fontSize: '1rem', // set default icon width and height to 1rem
              '&.MuiSvgIcon-fontSizeSmall': {
                fontSize: '0.75rem',
              },
            },
          },
        },
      },

Im assuming since defaultProps isn't ready yet. We would have to add it manually to the specific components?
i.e.

<Checkbox
      disableRipple
      icon={<CheckboxOutline />}
      checkedIcon={<CheckboxIcon />}
      color="primary"
      {...props}
    />

[o-alexandrov]

Both the theme and DefaultPropsProvider are documented in the migration guide.

Is DefaultPropsProvider not ready, @brijeshb42 ?

• it’s been merged to v6 a month ago and even to v5 more than 2 weeks ago

[o-alexandrov]

@brijeshb42 @siriwatknp I tried DefaultPropsProvider with mui/material v6 and it doesn’t work with latest mui/material and pigment. Default props are not changing.

I don’t have time to create a reproducible example, but if you work on the provider, just know, it doesn’t work.

[siriwatknp]

@o-alexandrov here is the proof that it works: https://codesandbox.io/s/dazzling-keldysh-hh9rdh?file=/src/Demo.tsx

There is one case that it might not work as you expected is using DefaultPropsProvider with ThemeProvider or CssVarsProvider.

<DefaultPropsProvider value={…}>
  <ThemeProvider theme={{ components: { … } }}>
    …
  </ThemeProvider>
</DefaultPropsProvider>

The value provided to DefaultPropsProvider will not work because ThemeProvider also contains DefaultPropsProvider internally (to smoothly migrate from v5 to v6).

I think what we could improve is to skip rendering the Context provider if there is no value from the prop. https://github.com/siriwatknp/material-ui/blob/remove-css-vars-provider/packages/mui-system/src/DefaultPropsProvider/DefaultPropsProvider.tsx#L12

[o-alexandrov]

@siriwatknp
Thank you. I’ve used DefaultPropsProvider to prepare future migration to Pigment’s extendTheme. So I added a separate DefaultPropsProvider that wraps ThemeProvider. Based on what you mentioned wrapping ThemeProvider over DefaultPropsProvider would have worked.

Please consider to add DefaultPropsProvider to this file in your existing PR with MUI and pigment examples.