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

Answer 1

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

对于早期版本，从本教程开始，尝试强制执行

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;