如何从 MUI v5 导入 CSSProperties？

Question

我有很多组件将样式作为道具引入。简单的东西，例如：

import { CSSProperties } from '@material-ui/styles/withStyles' // importing from mui v4 because I don't know how to do so from v5 paths
import { styled } from '@mui/material'

const StyledDiv = styled('div')(({ theme, customStyles }: StyledDivType) => ({
  color: theme.palette.text.primary,
  ...customStyles
}))

export const MyComponent = (customStyles: CSSProperties) => (
  <StyledDiv customStyles={customStyles}>My component</StyledDiv>
)

// Usage:
const App = () => (
  <MyComponent customStyles={{ padding: 10, backgroundColor: 'blue' }}/>
)

问题是，出于打字的目的，我找不到从 MUI v5 导入 CSSProperties 类型的正确位置。导入它的正确位置在哪里，以便我可以删除所有 MUI v4 导入路径？

谢谢！

Answer 1

v5 中的等效导入是：

import { CSSProperties } from '@mui/material/styles/createTypography';

此处导出：https://github.com/mui/material-ui/blob/v5.5.3/packages/mui-material/src/styles/createTypography.d.ts#L41

这种方法的缺点是，这将被视为 third-level 导入，这意味着 following portion of the documentation 适用：

Be aware that we only support first and second-level imports. Anything deeper is considered private and can cause issues, such as module duplication in your bundle.

也可以使用：

import { CSSProperties } from '@mui/styles/withStyles';

此处导出：https://github.com/mui/material-ui/blob/v5.5.3/packages/mui-styles/src/withStyles/withStyles.d.ts#L22

如果您不以其他方式依赖 @mui/styles，纯粹为了导入而引入它似乎很不幸，但考虑到其他方法的缺点，我没有很强的信心关于您应该采用哪种方法的意见。

如何从 MUI v5 导入 CSSProperties？

How to import CSSProperties from MUI v5?

typescript

reactjs

material-ui

styled-components