[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), },

    '&.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!