Skip to content

Commit f233c5b

Browse files
siriwatknpsiriwatknp
authored
[material-nextjs][system] Backport CSS layers to v5 (#46320)
1 parent b889570 commit f233c5b

File tree

36 files changed

+1012
-105
lines changed

36 files changed

+1012
-105
lines changed

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

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

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

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

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

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

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

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

0 commit comments

Comments
 (0)