打字稿中的样式组件“as”道具和自定义道具

Question

在将样式化组件 as 属性与自定义属性一起使用时，我收到了重载 typescript 警告。

Overload 1 of 2, '(props: Omit & Partial>, "theme"> & { ...; } & { ...; }): ReactElement'，给出了以下错误。 类型“字符串”不可分配给类型“未定义”。 重载 2 of 2, '(props: StyledComponentPropsWithAs): 反应元素，字符串 | JSXElementConstructor>'，给出以下错误。 输入'{孩子：字符串|不明确的;如：“跨度”；变体：{显示：{不透明度：数字； y：数字；过渡：{轻松：字符串；持续时间：数字； staggerChildren：数字； delayChildren：数字； }; };隐藏： { ...; }; }; }' 不可分配给类型 'IntrinsicAttributes & Omit, HTMLSpanElement>, "key" |关键的 HTMLAttributes> & { ...; }, never> & Partial, "主题"> & { ...; } & { ...; }'。 'IntrinsicAttributes & Omit, HTMLSpanElement>, "key" 类型不存在属性 'variants' |关键的 HTMLAttributes> & { ...; }, never> & Partial, "主题"> & { ...; } & { ...; }'.ts(2769) index.d.ts(161, 53)：预期类型来自属性“as”，在此处声明的类型为“IntrinsicAttributes & Omit & Partial>, "theme"> & { ...; } & { ...; }'

例子：

链接组件

import React, { FC } from "react";
import styled from "styled-components";
import { motion } from "framer-motion";

interface IProps {
  variants?: any;
}

const Atag= styled(motion.a)`
  text-decoration: none;
`;

const Link: FC<IProps> = (props) => {
  return <Atag{...props} />;
};

export default Link;

我在 Link 中导入的另一个文件。

const StyledLink= styled(Link)`
   border: 1px solid red;
`;

<StyledLink as="button" variants={motionVariant}>hello</StyledLink>

motionVariant 是帧运动的对象。

如果我删除了 variables 道具并仅使用 as 道具 typescript 停止抱怨。 如果我删除 as 道具并保留 variant 道具，它将停止抱怨。 但它不会让我将两者一起使用。 为什么我不能在这里同时使用这两者并仍然保持打字稿快乐。

Answer 1

我遇到了类似的问题，我认为由于需要在 styled-components 中定义通用道具的方式，使用styled() 包裹运动时如何定义它们有点令人困惑。

如何根据样式化组件定义props docs

import styled from 'styled-components';
import Header from './Header';

interface TitleProps {
  readonly isActive: boolean;
}

const Title = styled.h1<TitleProps>`
  color: ${(props) => (props.isActive ? props.theme.colors.main : props.theme.colors.secondary)};
`;

如何在代码中不定义道具：

import styled from "styled-components";

interface IProps {
  variants?: any;
}

const Link = styled.a<IProps>`
  text-decoration: none;
`;

export default Link;

如何在你的代码中定义道具with动作：

import { HTMLMotionProps, motion } from "framer-motion";
import styled from "styled-components";

/**
 * notice the props extend HTMLMotionProps<"a"> this is so all the default   
 * props are passed such as `onClick`
 */
interface IProps extends HTMLMotionProps<"a">{
  variants?: any;
}

//notice motion is called as a function instead of `motion.a`
const Link = styled(motion<IProps>("a"))`
  text-decoration: none;
`;

export default Link;