adaptV4Theme.js
2.35 KB
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
'use client';
import { createBreakpoints, createSpacing } from '@mui/system';
export default function adaptV4Theme(inputTheme) {
if (process.env.NODE_ENV !== 'production') {
console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
}
const {
defaultProps = {},
mixins = {},
overrides = {},
palette = {},
props = {},
styleOverrides = {},
...other
} = inputTheme;
const theme = {
...other,
components: {}
};
// default props
Object.keys(defaultProps).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.defaultProps = defaultProps[component];
theme.components[component] = componentValue;
});
Object.keys(props).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.defaultProps = props[component];
theme.components[component] = componentValue;
});
// CSS overrides
Object.keys(styleOverrides).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.styleOverrides = styleOverrides[component];
theme.components[component] = componentValue;
});
Object.keys(overrides).forEach(component => {
const componentValue = theme.components[component] || {};
componentValue.styleOverrides = overrides[component];
theme.components[component] = componentValue;
});
// theme.spacing
theme.spacing = createSpacing(inputTheme.spacing);
// theme.mixins.gutters
const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
const spacing = theme.spacing;
theme.mixins = {
gutters: (styles = {}) => {
return {
paddingLeft: spacing(2),
paddingRight: spacing(2),
...styles,
[breakpoints.up('sm')]: {
paddingLeft: spacing(3),
paddingRight: spacing(3),
...styles[breakpoints.up('sm')]
}
};
},
...mixins
};
const {
type: typeInput,
mode: modeInput,
...paletteRest
} = palette;
const finalMode = modeInput || typeInput || 'light';
theme.palette = {
// theme.palette.text.hint
text: {
hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
},
mode: finalMode,
type: finalMode,
...paletteRest
};
return theme;
}