javascript - 将 Typescript 与样式化组件和 Material UI 结合使用

Question

将 Typescript 与 MUI+Styled-Components 结合使用，由于类型错误，您必须直接将 props 传递给 MUI 元素......

const Index = () => {
  return (
      <StyledButton
        variant="contained"
      >
        Hello World
      </StyledButton>
   )}


const StyledButton = styled(Button)`
  background: red;
  color: white;
`;

但是，这会出现以下错误:

键入'{ children: string;变体:“包含”； }' 不可分配给类型 '(IntrinsicAttributes & Pick>) | PropsWithChildren，“形式” | “风格” | “标题” | ... 284 更多 ... | “变体”>＆部分<...>，“形式” | ... 286 更多... | “变体”> & { ...; } & { ...; }) | (IntrinsicAttributes & ... 3 more ... & { ...; })’

当你像下面这样直接传入 props 时，这个错误就会消失。即使在 Styled MUI 元素上使用 0 个 Prop 和 0 个子元素，它也会出现错误。

const StyledButton = styled(props => <Button {...props} />)`
  background: red;
  color: white;
`;

Answer 1

这应该适用于 MUI >= 4.*

对于早期版本，来自 this tutorial ，尝试强制执行 StyledButton 的类型:

const StyledButton = styled(Button)`
  background: red;
  color: white;
` as typeof(Button);