如何正确键入作为道具传递给 Material UI 上的 styled() 方法的主题？ （打字稿）

Question

我正在使用 Material UI 及其样式化函数来对组件进行样式化，例如：

const MyThemeComponent = styled("div")(({ theme }) => `
  color: ${theme.palette.primary.contrastText};
  background-color: ${theme.palette.primary.main};
  padding: ${theme.spacing(1)};
  borderRadius: ${theme.shape.borderRadius};
`);

它有效，但输入无效，显示写入后的字段，类型为 any。因此，我们没有自动完成、建议或错误检查。

如何让 styled() 方法中的输入正常工作？

demo

Answer 1

对你有用吗https://codesandbox.io/s/themeusage-material-demo-forked-pikixf。 如果自动完成功能在 codesandbox 中正常工作，我无法真正正确地测试它。

Answer 2

通过使用 Emotion / Styled-Components 格式而不是文档中显示的 MUI 格式修复了它。

const MyThemeComponent = styled("div")`
  color: ${({ theme }) => theme.palette.primary.contrastText};
  background-color: ${({ theme }) => theme.palette.primary.main};
  padding: ${({ theme }) => theme.spacing(2)};
  border-radius: ${({ theme }) => theme.shape.borderRadius}px;
`;

fixed demo