Skip to content

Commit 6259f30

Browse files
siriwatknpsiriwatknp
authored
[material-nextjs][system] Backport CSS layers to v6 (#46283)
1 parent a8080de commit 6259f30

File tree

31 files changed

+1053
-53
lines changed

31 files changed

+1053
-53
lines changed

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import * as React from 'react';
2+
import { createTheme, ThemeProvider } from '@mui/material/styles';
3+
import Accordion from '@mui/material/Accordion';
4+
import AccordionSummary from '@mui/material/AccordionSummary';
5+
import AccordionDetails from '@mui/material/AccordionDetails';
6+
import Typography from '@mui/material/Typography';
7+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
8+
import Box from '@mui/material/Box';
9+
import Switch from '@mui/material/Switch';
10+
11+
export default function CssLayersCaveat() {
12+
const [cssLayers, setCssLayers] = React.useState(false);
13+
const theme = React.useMemo(() => {
14+
return createTheme({
15+
modularCssLayers: cssLayers,
16+
cssVariables: true,
17+
components: {
18+
MuiAccordion: {
19+
styleOverrides: {
20+
root: {
21+
margin: 0,
22+
},
23+
},
24+
},
25+
},
26+
});
27+
}, [cssLayers]);
28+
return (
29+
<div>
30+
<Box
31+
sx={{
32+
display: 'flex',
33+
alignItems: 'center',
34+
justifyContent: 'center',
35+
marginBottom: '16px',
36+
}}
37+
>
38+
<Typography
39+
component="span"
40+
sx={{ marginRight: '8px', fontSize: '14px', color: 'text.secondary' }}
41+
>
42+
No CSS Layers
43+
</Typography>
44+
<Switch checked={cssLayers} onChange={() => setCssLayers(!cssLayers)} />
45+
<Typography
46+
component="span"
47+
sx={{ marginLeft: '8px', fontSize: '14px', color: 'text.secondary' }}
48+
>
49+
With CSS Layers
50+
</Typography>
51+
</Box>
52+
<ThemeProvider theme={theme}>
53+
<div>
54+
<Accordion defaultExpanded>
55+
<AccordionSummary
56+
expandIcon={<ExpandMoreIcon />}
57+
aria-controls="panel1-content"
58+
id="panel1-header"
59+
>
60+
<Typography component="span">Accordion 1</Typography>
61+
</AccordionSummary>
62+
<AccordionDetails>
63+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
64+
malesuada lacus ex, sit amet blandit leo lobortis eget.
65+
</AccordionDetails>
66+
</Accordion>
67+
<Accordion>
68+
<AccordionSummary
69+
expandIcon={<ExpandMoreIcon />}
70+
aria-controls="panel2-content"
71+
id="panel2-header"
72+
>
73+
<Typography component="span">Accordion 2</Typography>
74+
</AccordionSummary>
75+
<AccordionDetails>
76+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
77+
malesuada lacus ex, sit amet blandit leo lobortis eget.
78+
</AccordionDetails>
79+
</Accordion>
80+
</div>
81+
</ThemeProvider>
82+
</div>
83+
);
84+
}

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import * as React from 'react';
2+
import { createTheme, ThemeProvider } from '@mui/material/styles';
3+
import Accordion from '@mui/material/Accordion';
4+
import AccordionSummary from '@mui/material/AccordionSummary';
5+
import AccordionDetails from '@mui/material/AccordionDetails';
6+
import Typography from '@mui/material/Typography';
7+
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
8+
import Box from '@mui/material/Box';
9+
import Switch from '@mui/material/Switch';
10+
11+
export default function CssLayersCaveat() {
12+
const [cssLayers, setCssLayers] = React.useState(false);
13+
const theme = React.useMemo(() => {
14+
return createTheme({
15+
modularCssLayers: cssLayers,
16+
cssVariables: true,
17+
components: {
18+
MuiAccordion: {
19+
styleOverrides: {
20+
root: {
21+
margin: 0,
22+
},
23+
},
24+
},
25+
},
26+
});
27+
}, [cssLayers]);
28+
return (
29+
<div>
30+
<Box
31+
sx={{
32+
display: 'flex',
33+
alignItems: 'center',
34+
justifyContent: 'center',
35+
marginBottom: '16px',
36+
}}
37+
>
38+
<Typography
39+
component="span"
40+
sx={{ marginRight: '8px', fontSize: '14px', color: 'text.secondary' }}
41+
>
42+
No CSS Layers
43+
</Typography>
44+
<Switch checked={cssLayers} onChange={() => setCssLayers(!cssLayers)} />
45+
<Typography
46+
component="span"
47+
sx={{ marginLeft: '8px', fontSize: '14px', color: 'text.secondary' }}
48+
>
49+
With CSS Layers
50+
</Typography>
51+
</Box>
52+
<ThemeProvider theme={theme}>
53+
<div>
54+
<Accordion defaultExpanded>
55+
<AccordionSummary
56+
expandIcon={<ExpandMoreIcon />}
57+
aria-controls="panel1-content"
58+
id="panel1-header"
59+
>
60+
<Typography component="span">Accordion 1</Typography>
61+
</AccordionSummary>
62+
<AccordionDetails>
63+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
64+
malesuada lacus ex, sit amet blandit leo lobortis eget.
65+
</AccordionDetails>
66+
</Accordion>
67+
<Accordion>
68+
<AccordionSummary
69+
expandIcon={<ExpandMoreIcon />}
70+
aria-controls="panel2-content"
71+
id="panel2-header"
72+
>
73+
<Typography component="span">Accordion 2</Typography>
74+
</AccordionSummary>
75+
<AccordionDetails>
76+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
77+
malesuada lacus ex, sit amet blandit leo lobortis eget.
78+
</AccordionDetails>
79+
</Accordion>
80+
</div>
81+
</ThemeProvider>
82+
</div>
83+
);
84+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from 'react';
2+
import { createTheme, ThemeProvider } from '@mui/material/styles';
3+
import FormControl from '@mui/material/FormControl';
4+
import InputLabel from '@mui/material/InputLabel';
5+
import OutlinedInput from '@mui/material/OutlinedInput';
6+
import FormHelperText from '@mui/material/FormHelperText';
7+
8+
const theme = createTheme({
9+
modularCssLayers: true,
10+
cssVariables: true,
11+
});
12+
13+
export default function CssLayersInput() {
14+
return (
15+
<ThemeProvider theme={theme}>
16+
<FormControl variant="outlined">
17+
<InputLabel
18+
shrink
19+
htmlFor="css-layers-input"
20+
sx={{
21+
width: 'fit-content',
22+
transform: 'none',
23+
position: 'relative',
24+
mb: 0.25,
25+
fontWeight: 'medium',
26+
pointerEvents: 'auto',
27+
}}
28+
>
29+
Label
30+
</InputLabel>
31+
<OutlinedInput
32+
id="css-layers-input"
33+
placeholder="Type something"
34+
slotProps={{
35+
input: {
36+
sx: { py: 1.5, height: '2.5rem', boxSizing: 'border-box' },
37+
},
38+
}}
39+
/>
40+
<FormHelperText sx={{ marginLeft: 0 }}>Helper text goes here</FormHelperText>
41+
</FormControl>
42+
</ThemeProvider>
43+
);
44+
}

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

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import * as React from 'react';
2+
import { createTheme, ThemeProvider } from '@mui/material/styles';
3+
import FormControl from '@mui/material/FormControl';
4+
import InputLabel from '@mui/material/InputLabel';
5+
import OutlinedInput from '@mui/material/OutlinedInput';
6+
import FormHelperText from '@mui/material/FormHelperText';
7+
8+
const theme = createTheme({
9+
modularCssLayers: true,
10+
cssVariables: true,
11+
});
12+
13+
export default function CssLayersInput() {
14+
return (
15+
<ThemeProvider theme={theme}>
16+
<FormControl variant="outlined">
17+
<InputLabel
18+
shrink
19+
htmlFor="css-layers-input"
20+
sx={{
21+
width: 'fit-content',
22+
transform: 'none',
23+
position: 'relative',
24+
mb: 0.25,
25+
fontWeight: 'medium',
26+
pointerEvents: 'auto',
27+
}}
28+
>
29+
Label
30+
</InputLabel>
31+
<OutlinedInput
32+
id="css-layers-input"
33+
placeholder="Type something"
34+
slotProps={{
35+
input: {
36+
sx: { py: 1.5, height: '2.5rem', boxSizing: 'border-box' },
37+
},
38+
}}
39+
/>
40+
<FormHelperText sx={{ marginLeft: 0 }}>Helper text goes here</FormHelperText>
41+
</FormControl>
42+
</ThemeProvider>
43+
);
44+
}

0 commit comments

Comments
 (0)