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

将Typescript与MUI + Styled-Components一起使用，由于类型错误，您必须直接将 Prop 传递给MUI元素……。

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


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

但是，这将导致以下错误:

输入'{children:string;变体:“包含”； }'不可分配给类型'((IntrinsicAttributes＆Pick>)| PropsWithChildren，“表格” | “样式” | “标题” | ... 284更多... | “variant”>和Partial ，“表单” | ... 286更多... | “variant”>＆{...; }＆{...; })| (IntrinsicAttributes＆... 3 more ...＆{...;})’

当您直接传递以下 Prop 时，此错误就会消失。即使在Styled MUI元素上使用0个 Prop 和0个 child ，它也会产生错误。

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

最佳答案

这在MUI> = 4. *时可以正常工作

对于较早的版本，请从this tutorial尝试强制StyledButton的类型:

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