forked from mui/material-ui
/
CssVarsProvider.spec.tsx
71 lines (67 loc) · 1.63 KB
/
CssVarsProvider.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
import * as React from 'react';
import {
experimental_extendTheme as extendTheme,
Experimental_CssVarsProvider as CssVarsProvider,
styled,
useTheme,
Overlays,
} from '@mui/material/styles';
const customTheme = extendTheme({
colorSchemes: {
light: {
opacity: {
inputPlaceholder: 0.1,
inputUnderline: 0.1,
},
overlays: Array(25).fill('') as Overlays,
palette: {
AppBar: {
darkBg: '',
darkColor: '',
defaultBg: '',
},
// @ts-expect-error
mode: '',
getContrastText: () => '',
tonalOffset: 1,
},
},
dark: {
opacity: {},
palette: {},
},
},
components: {
MuiButton: {
styleOverrides: {
root: ({ theme }) => ({
color: theme.vars.palette.primary.main,
}),
},
},
},
});
const TestStyled = styled('div')(({ theme }) => ({
// test that `theme.vars` works
color: theme.vars.palette.primary.main,
// test that `theme.getColorSchemeSelector` works
[theme.getColorSchemeSelector('dark')]: {
color: theme.vars.palette.common.onBackground,
},
}));
const TestUseTheme = () => {
const theme = useTheme();
// test that `theme` from useTheme has access to CSS vars
return <div style={{ background: theme.vars.palette.common.background }}>test</div>;
};
<CssVarsProvider theme={customTheme}>
<TestStyled
sx={(theme) => ({
// test that `theme` in sx has access to CSS vars
[theme.getColorSchemeSelector('dark')]: {
border: '1px solid',
borderColor: theme.vars.palette.divider,
},
})}
/>
</CssVarsProvider>;