[docs] variables and selector like [theme.breakpoints.down('md')], how to use in Pigment CSS ?

[dotjan37]

Related page

https://next.mui.com/material-ui/migration/migrating-to-pigment-css/

Kind of issue

Missing information

Issue description

Hi,

I have a lot of Emotion (sx-constructs) and styled components with variables and selectors like [theme.breakpoints.down('md')]:

i miss documentation how to migrate all this to Pigment CSS:

for example:

const navigationHeight = 56;

const StyledSnackbarInfo = styled(Snackbar)(({ theme }) => ({
'&.MuiSnackbar-root': {
marginBottom: calc(${navigationHeight + 8}px),
},
[theme.breakpoints.down('md')]: {
'&.MuiSnackbar-root': {
marginBottom: calc(${navigationHeight + 10}px),
},
},
}));

OR

const drawerWidth = 240;

<AppBar
position="fixed"
sx={{
width: { md: calc(100% - ${drawerWidth}px) },
ml: { md: ${drawerWidth}px },
}}

...

How can i migrate all sx-constructs with these ${drawerWidth} variables and [theme.breakpoints.down('md')] as selectors in styled components to Pigment CSS?

Thanks in advance!

Context

No response

Search keywords: variables selectors pigment css

[halersson]

Hi @dotjan37

(A possible solution)
Regarding the [theme.breakpoints.down('md')] migration, you can set up the Pigment configuration in your project using the createTheme function for custom values or the extendTheme function. Just make sure that styled is coming from @mui/material-pigment-css.

next.config.mjs (or vite.config.ts)

import { extendTheme, withPigment } from '@pigment-css/nextjs-plugin';
import { customTheme } from './src/app/theme'

const pigmentConfig = {
  theme: customTheme
}
export default withPigment({/* ...next config */}, pigmentConfig);

src/app/theme.ts

import { createTheme } from "@mui/material";

export const customTheme = createTheme({
  breakpoints: {
    values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, },
  },
});

const StyledSnackbarInfo = styled(Snackbar)(({ theme }) => ({
  [theme.breakpoints.up('md')]: {
    /*...your code */
  },
}));

As for the sx props from @mui/material, there isn't an automated way to convert sx to PigmentCSS directly, so you'll need to convert it manually, however, you can reuse createTheme to create a consistent sizing pattern

const useSnackbarStyles = () => css({
    height: `${drawerWidth}px`,
    [customTheme.breakpoints.down('md')]: {
        width: `calc(100% - ${drawerWidth}px)`,
        marginLeft: `${drawerWidth}px`,
    },
});

[dotjan37]

Thanks! I'll give it a try!

[mtr1990]

@halersson

How can you import like that?

import { customTheme } from './src/app/theme' in next.config.mjs

[brijeshb42]

If you are using latest next.js, you can import from ts files in your next.config.ts. But for older versions, the src/app/theme will have to be a js file so that you can import the theme into next.config.mjs or next.config.js.