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更多... | “ variant”>和Partial <...>，“表单” | ... 286更多... | “ variant”>＆{...; }＆{...; }）| （IntrinsicAttributes＆... 3 more ...＆{...;}）’

当您直接传递以下道具时，此错误就会消失。即使在Styled MUI元素上使用0个道具和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);

Answer 2

我通过安装@types/styled-components / styled-components意外地解决了这个问题，无论如何我都需要获得样式/主题/ TS才能很好地玩：

import React from "react";
import styled from "styled-components";
import { Theme, useTheme } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";

const StyledCustomButton: React.FC<{
  theme: Theme;
}> = styled(({ ...props }) => <Button {...props}>Test</Button>)`
  && {
    padding-bottom: ${(props) => props.theme.spacing(2)}px;
  }
`;

const CustomButton: React.FC = () => {
  const theme: Theme = useTheme();
  return <StyledCustomButton theme={theme} />;
};

export default CustomButton;

将Typescript与样式化的组件和材质UI结合使用

2 个答案: