使用 emotion/styled 组件的打字稿问题

Question

当前行为：

当我想设置包装样式组件的父组件的类型时，我在使用 typescript 和 emotion/styled 时遇到问题。

我有这个包装样式化组件的父组件

// button/index.tsx

import { ButtonStyled } from "./Button.styles";
import { ButtonProps } from "./Button.interface";

const Button = ({
  variant = "primary",
  ...rest
}: ButtonProps): typeof ButtonStyled => <ButtonStyled {...rest} />;

export default Button;

// button/Button.styles

import styled from "@emotion/styled";

export const ButtonStyled = styled.button`
  padding: 0.4em;
  width: 100%;
  border: 0;
`;

当我设置 return 类型的 Button ( typeof ButtonStyled ) 时出现此错误：

_Type 'ReactElement<any, any>' 缺少类型 'StyledComponent<{ theme?: Theme; as?: ElementType; }, DetailedHTMLProps<ButtonHTMLAttributes, HTMLButtonElement>, {}>' 的以下属性：withComponent，_emotion_styles

这很重要，因为我想在另一个文件中扩展按钮的样式

import styled from "@emotion/styled";

import Button from "components/button";

export const SubmitButton = Button.withComponent`
background: #333;
color: #fff;
`;

但它不能这样做，因为它会抛出这个错误：

属性 'withComponent' 不存在于类型 '({ variant, ...rest }: ButtonProps) => StyledComponent<{ theme?: Theme;作为？：元素类型； }, DetailedHTMLProps, {}>'.

环境信息：

next版本：10.2.3
react版本：17.0.2
@emotion/react版本：11.4.0
@emotion/styled版本：11.3.0

Answer 1

您的代码存在一些问题：

button/index.tsx 中 Button 函数的 return 类型不是 React.Component 或 typeof ButtonStyled。这是JSX.Element
考虑到 Button 本身的类型是 (props: ButtonProps) => JSX.Element。这是一个功能。绝对没有withComponent属性.

我想你真正想要实现的是这样的：

// -------- button/Button.styles
export const ButtonStyled = styled.button`
  padding: 0.4em;
  width: 100%;
  border: 0;
`;
// -------- button/index.tsx
const Button = ({ variant = "primary", ...rest }: ButtonProps) => (
  <ButtonStyled {...rest} />
);
// --------
export const SubmitButton = styled(ButtonStyled)`
  background: #333;
  color: #fff;
`.withComponent(Button);

使用 emotion/styled 组件的打字稿问题

Problem with typescript using emotion/styled component

css

emotion

typescript

reactjs

styled-components