48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
|
import { Box as SystemBox, BoxProps as SystemBoxProps, createBox } from '@mui/system';
|
||
|
|
import { expectType } from '@mui/types';
|
||
|
|
import Box, { BoxProps as MaterialBoxProps } from '@mui/material/Box';
|
||
|
|
import { createTheme } from '@mui/material/styles';
|
||
|
|
|
||
|
|
function ThemeValuesCanBeSpread() {
|
||
|
|
<Box
|
||
|
|
sx={(theme) => ({
|
||
|
|
...theme.typography.body1,
|
||
|
|
color: theme.palette.primary.main,
|
||
|
|
})}
|
||
|
|
/>;
|
||
|
|
<Box
|
||
|
|
sx={(theme) => ({
|
||
|
|
...theme.mixins.toolbar,
|
||
|
|
color: theme.palette.primary.main,
|
||
|
|
})}
|
||
|
|
/>;
|
||
|
|
<Box
|
||
|
|
sx={(theme) => ({
|
||
|
|
...theme.mixins.toolbar,
|
||
|
|
color: 'primary.main',
|
||
|
|
})}
|
||
|
|
/>;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Compatibility with Material UI's Box
|
||
|
|
const defaultTheme = createTheme({});
|
||
|
|
const CustomBox = createBox({ defaultTheme });
|
||
|
|
expectType<typeof Box, typeof CustomBox>(CustomBox);
|
||
|
|
|
||
|
|
// @ts-expect-error System's Box has different type than Material UI's Box
|
||
|
|
expectType<typeof SystemBox, typeof CustomBox>(CustomBox);
|
||
|
|
|
||
|
|
function ColorTest() {
|
||
|
|
<Box
|
||
|
|
color={(theme) => theme.vars.palette.common.black}
|
||
|
|
sx={(theme) => ({ backgroundColor: theme.vars.palette.background.default })}
|
||
|
|
/>;
|
||
|
|
}
|
||
|
|
|
||
|
|
function ComponentTest() {
|
||
|
|
return <span />;
|
||
|
|
}
|
||
|
|
|
||
|
|
expectType<SystemBoxProps['component'], MaterialBoxProps['component']>('span');
|
||
|
|
expectType<SystemBoxProps['component'], MaterialBoxProps['component']>(ComponentTest);
|