Open dotjan37 opened 1 month ago
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`,
},
});
Thanks! I'll give it a try!
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)
, },}));
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