尽管已使用 attr 指定，但样式化组件仍需要 Prop

Question

我创建了一个基本图标组件，它使用

SVG

从 react-inlinesvg 扩展了

styled-components

，以允许自定义样式道具。此外，

attr

调用将

src

属性指定给

SVG

组件，因为不同的

SVG

文件将具有不同的样式实现，因此每个文件都是其自己的组件。这是相关代码：

import SVG from 'react-inlinesvg';
import { CSSProperties as _CSSProperties } from "react";
import styled, { Interpolation } from "styled-components";

// Remove undefined from CSSProperties, as all these constants are guaranteed to
// exist.
export type RequiredCSSProperties = Required<_CSSProperties>;

// Add a prop that allows for custom CSS to be added to a styled component instance without
// creating a new styled component.
export type WithCSSProp<T={}> = T & { $css?: Interpolation<Omit<T, "$css">> };

export type MenuIconStyleAttributes = {
    $color?: RequiredCSSProperties['stroke'] | null;
    $width?: RequiredCSSProperties['width'];
    $height?: RequiredCSSProperties['height'];
};

export default styled(SVG).attrs<WithCSSProp<MenuIconStyleAttributes>>(
    (props) => ({
        src: '/icons/menu.svg',
        $color: props.$color ?? null,
        $width: props.$width ?? '24px',
        $height: props.$height ?? 'auto',
        $css: props.$css ?? null
    })
)`
    width: ${({$width}) => $width};
    height: ${({$height}) => $height};

    > path {
        stroke: ${({$color, theme}) => $color ?? theme.textColor};
    }

    ${({$css}) => $css}
`;

我的问题是，当我使用此组件时，

src

属性被视为必需的，即使它是用静态值指定的。确切错误：

No overload matches this call.
  Overload 1 of 2, '(props: PolymorphicComponentProps<"web", FastOmit<Substitute<Substitute<{ string?: string | number | undefined; stroke?: string | undefined; clipPath?: string | undefined; color?: string | undefined; cursor?: string | number | undefined; ... 481 more ...; uniquifyIDs?: boolean | undefined; }, { ...; }>, WithCSSProp<...>>, never>, void, void, {}, {}>): Element', gave the following error.
    Property 'src' is missing in type '{}' but required in type 'FastOmit<Substitute<FastOmit<Substitute<Substitute<{ string?: string | number | undefined; stroke?: string | undefined; clipPath?: string | undefined; color?: string | undefined; cursor?: string | number | undefined; direction?: string | ... 1 more ... | undefined; ... 480 more ...; uniquifyIDs?: boolean | undefined...'.
  Overload 2 of 2, '(props: FastOmit<Substitute<Substitute<{ string?: string | number | undefined; stroke?: string | undefined; clipPath?: string | undefined; color?: string | undefined; cursor?: string | number | undefined; direction?: string | ... 1 more ... | undefined; ... 480 more ...; uniquifyIDs?: boolean | undefined; }, { ...; }>, WithCSSProp<...>>, never>): ReactNode', gave the following error.
    Property 'src' is missing in type '{}' but required in type 'FastOmit<Substitute<Substitute<{ string?: string | number | undefined; stroke?: string | undefined; clipPath?: string | undefined; color?: string | undefined; cursor?: string | number | undefined; direction?: string | ... 1 more ... | undefined; ... 480 more ...; uniquifyIDs?: boolean | undefined; }, { ...; }>, With...'.

我可以将

src

覆盖为可选，但无论如何该值都会被忽略，所以我真的只想完全摆脱该道具。这可能吗？

Answer 1

我自己找到了答案。我围绕 SVG 组件创建了以下包装函数，并设置了该组件的样式，而不是 SVG 本身：

import SVG from 'react-inlinesvg';
import { ComponentProps } from 'react';

function StaticSrcSVG(src: string) {
    return Object.assign(
        (props: Omit<ComponentProps<typeof SVG>, 'src'>) => <SVG src={src} {...props} />,
        { 
            displayName: `${src}(StaticSrcSVG)`
        }
    );
}