-
-
Notifications
You must be signed in to change notification settings - Fork 31.7k
/
Box.spec.tsx
106 lines (98 loc) · 2.28 KB
/
Box.spec.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
import * as React from 'react';
import { Box, Theme } from '@mui/system';
interface TestProps {
test?: string;
}
function Test(props: TestProps) {
const { test, ...other } = props;
return <span {...other}>{test}</span>;
}
function ResponsiveTest() {
<Box sx={{ p: [2, 3, 4] }} />;
<Box sx={{ p: { xs: 2, sm: 3, md: 4 } }} />;
<Box sx={{ fontSize: [12, 18, 24] }}>Array API</Box>;
<Box
sx={{
fontSize: {
xs: 12,
sm: 18,
md: 24,
},
}}
>
Object API
</Box>;
}
function GapTest() {
<Box
sx={{
width: '100%',
display: 'flex',
alignItems: 'center',
flex: '1 0',
gap: '16px',
}}
>
Gap
</Box>;
}
function ComponentPropTest() {
<Box component="img" src="https://mui.com/" alt="Material UI" />;
<Box component={Test} test="Test string" />;
}
function ThemeCallbackTest() {
<Box sx={{ background: (theme) => theme.palette.primary.main }} />;
<Box sx={{ ':hover': (theme) => ({ background: theme.palette.primary.main }) }} />;
<Box sx={{ '& .some-class': (theme) => ({ background: theme.palette.primary.main }) }} />;
<Box maxWidth={(theme) => theme.breakpoints.values.sm} />;
}
function CssVariablesWithNestedSelectors() {
<Box
sx={(theme) => ({
'--mui-palette-primary-main': '#FF0000',
})}
/>;
<Box
sx={(theme) => ({
'--mui-palette-primary-main': '#FF0000',
'&:hover': {
backgroundColor: theme.palette.primary.main,
'--mui-palette-primary-main': (t) => theme.palette.primary.main,
'--mui-spacing': (t) => theme.shape.borderRadius,
},
})}
/>;
<Box
sx={{
'--mui-palette-primary-main': '#FF0000',
'&:hover': {
backgroundColor: '#EE0000',
},
}}
/>;
<Box
sx={{
'--mui-palette-primary-main': '#FF0000',
'& .foo-bar': {
backgroundColor: '#EE0000',
},
}}
/>;
}
// The fill prop conflicts with the Array's fill functiom.
// This test ensures that the callback value inside the sx prop
// can be used without conflicting with the Array's fill function
function TestFillPropCallback() {
<Box
sx={{
fill: (theme) => theme.palette.primary.main,
}}
/>;
<Box
sx={[
{
fill: (theme) => theme.palette.primary.main,
},
]}
/>;
}