[material-nextjs][system] Backport CSS layers to v6

docs/data/material/customization/css-layers/CssLayersCaveat.js

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Box from '@mui/material/Box';
+import Switch from '@mui/material/Switch';
+
+export default function CssLayersCaveat() {
+  const [cssLayers, setCssLayers] = React.useState(false);
+  const theme = React.useMemo(() => {
+    return createTheme({
+      modularCssLayers: cssLayers,
+      cssVariables: true,
+      components: {
+        MuiAccordion: {
+          styleOverrides: {
+            root: {
+              margin: 0,
+            },
+          },
+        },
+      },
+    });
+  }, [cssLayers]);
+  return (
+    <div>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <Typography
+          component="span"
+          sx={{ marginRight: '8px', fontSize: '14px', color: 'text.secondary' }}
+        >
+          No CSS Layers
+        </Typography>
+        <Switch checked={cssLayers} onChange={() => setCssLayers(!cssLayers)} />
+        <Typography
+          component="span"
+          sx={{ marginLeft: '8px', fontSize: '14px', color: 'text.secondary' }}
+        >
+          With CSS Layers
+        </Typography>
+      </Box>
+      <ThemeProvider theme={theme}>
+        <div>
+          <Accordion defaultExpanded>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1-content"
+              id="panel1-header"
+            >
+              <Typography component="span">Accordion 1</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+              malesuada lacus ex, sit amet blandit leo lobortis eget.
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel2-content"
+              id="panel2-header"
+            >
+              <Typography component="span">Accordion 2</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+              malesuada lacus ex, sit amet blandit leo lobortis eget.
+            </AccordionDetails>
+          </Accordion>
+        </div>
+      </ThemeProvider>
+    </div>
+  );
+}

docs/data/material/customization/css-layers/CssLayersCaveat.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Box from '@mui/material/Box';
+import Switch from '@mui/material/Switch';
+
+export default function CssLayersCaveat() {
+  const [cssLayers, setCssLayers] = React.useState(false);
+  const theme = React.useMemo(() => {
+    return createTheme({
+      modularCssLayers: cssLayers,
+      cssVariables: true,
+      components: {
+        MuiAccordion: {
+          styleOverrides: {
+            root: {
+              margin: 0,
+            },
+          },
+        },
+      },
+    });
+  }, [cssLayers]);
+  return (
+    <div>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '16px',
+        }}
+      >
+        <Typography
+          component="span"
+          sx={{ marginRight: '8px', fontSize: '14px', color: 'text.secondary' }}
+        >
+          No CSS Layers
+        </Typography>
+        <Switch checked={cssLayers} onChange={() => setCssLayers(!cssLayers)} />
+        <Typography
+          component="span"
+          sx={{ marginLeft: '8px', fontSize: '14px', color: 'text.secondary' }}
+        >
+          With CSS Layers
+        </Typography>
+      </Box>
+      <ThemeProvider theme={theme}>
+        <div>
+          <Accordion defaultExpanded>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel1-content"
+              id="panel1-header"
+            >
+              <Typography component="span">Accordion 1</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+              malesuada lacus ex, sit amet blandit leo lobortis eget.
+            </AccordionDetails>
+          </Accordion>
+          <Accordion>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls="panel2-content"
+              id="panel2-header"
+            >
+              <Typography component="span">Accordion 2</Typography>
+            </AccordionSummary>
+            <AccordionDetails>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+              malesuada lacus ex, sit amet blandit leo lobortis eget.
+            </AccordionDetails>
+          </Accordion>
+        </div>
+      </ThemeProvider>
+    </div>
+  );
+}

docs/data/material/customization/css-layers/CssLayersInput.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import FormHelperText from '@mui/material/FormHelperText';
+
+const theme = createTheme({
+  modularCssLayers: true,
+  cssVariables: true,
+});
+
+export default function CssLayersInput() {
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl variant="outlined">
+        <InputLabel
+          shrink
+          htmlFor="css-layers-input"
+          sx={{
+            width: 'fit-content',
+            transform: 'none',
+            position: 'relative',
+            mb: 0.25,
+            fontWeight: 'medium',
+            pointerEvents: 'auto',
+          }}
+        >
+          Label
+        </InputLabel>
+        <OutlinedInput
+          id="css-layers-input"
+          placeholder="Type something"
+          slotProps={{
+            input: {
+              sx: { py: 1.5, height: '2.5rem', boxSizing: 'border-box' },
+            },
+          }}
+        />
+        <FormHelperText sx={{ marginLeft: 0 }}>Helper text goes here</FormHelperText>
+      </FormControl>
+    </ThemeProvider>
+  );
+}

docs/data/material/customization/css-layers/CssLayersInput.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import FormHelperText from '@mui/material/FormHelperText';
+
+const theme = createTheme({
+  modularCssLayers: true,
+  cssVariables: true,
+});
+
+export default function CssLayersInput() {
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl variant="outlined">
+        <InputLabel
+          shrink
+          htmlFor="css-layers-input"
+          sx={{
+            width: 'fit-content',
+            transform: 'none',
+            position: 'relative',
+            mb: 0.25,
+            fontWeight: 'medium',
+            pointerEvents: 'auto',
+          }}
+        >
+          Label
+        </InputLabel>
+        <OutlinedInput
+          id="css-layers-input"
+          placeholder="Type something"
+          slotProps={{
+            input: {
+              sx: { py: 1.5, height: '2.5rem', boxSizing: 'border-box' },
+            },
+          }}
+        />
+        <FormHelperText sx={{ marginLeft: 0 }}>Helper text goes here</FormHelperText>
+      </FormControl>
+    </ThemeProvider>
+  );
+}