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

Posted 2023-03-15

【中文标题】打字稿中的样式组件“as”道具和自定义道具

【英文标题】：styled components 'as' prop and custom prop in typescript

【发布时间】：2021-07-11 01:53:16

【问题描述】：

在将样式化组件 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 道具，它将停止抱怨。 但它不会让我将两者一起使用。 为什么我不能在这里同时使用这两者并仍然保持打字稿快乐。

【参考方案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;

【讨论】：

这条评论没有解决as 的问题，它似乎是StyledComponentProps 的一部分并且不容易被覆盖。