No overload matches this call?

Question

[Дамир Шаниязов]

Не могу понять какой тип данных должен быть

<s.SVG>
            <svg
              width="12"
              height="12"
              viewBox="0 0 12 12"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10.8 4.8H7.2V1.2C7.2 0.5373 6.6627 0 6 0C5.3373 0 4.8 0.5373 4.8 1.2V4.8H1.2C0.5373 4.8 0 5.3373 0 6C0 6.6627 0.5373 7.2 1.2 7.2H4.8V10.8C4.8 11.4627 5.3373 12 6 12C6.6627 12 7.2 11.4627 7.2 10.8V7.2H10.8C11.4627 7.2 12 6.6627 12 6C12 5.3373 11.4627 4.8 10.8 4.8Z"
                fill="white"
              />
            </svg>
          </s.SVG>

Компонент Styled Components

export const SVG = styled(WrapperSVG)`
  transition: all 0.15s ease-in-out;
`;

import React, { ReactSVG } from "react";

const WrapperSVG = ({ children }: SVGElement): ReturnType<React.FC> => {
  return <>{children}</>;
};

export default WrapperSVG;

Ошибка

Overload 1 of 2, '(props: { readonly children: HTMLCollection; slot: string; readonly style: CSSStyleDeclaration; animate: (keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | ... 1 more ... | undefined) => Animation; ... 260 more ...; focus: (options?: FocusOptions | undefined) => void; } & { ...; } & { ...; }): ReactElement<...>', gave the following error.
Type 'ReactElement' is missing the following properties from type 'HTMLCollection': namedItem, length, item, [Symbol.iterator]
Overload 2 of 2, '(props: StyledComponentPropsWithAs<({ children }: SVGElement) => ReactElement | null, any, {}, never, ({ children }: SVGElement) => ReactElement | null, ({ children }: SVGElement) => ReactElement<...> | null>): ReactElement<...>', gave the following error.
Type 'Element' is not assignable to type 'HTMLCollection'.

Comments

[Дамир Шаниязов]

низкомолекулярный макрос, забыл, добавил к вопросу

Answer 1

[Alexandroppolus]

Не совсем понятно, зачем тебе WrapperSVG. Скорее всего, это вообще не будет работать, поскольку ты никуда не передаешь тот проп className, который придет от styled.

это ведь styled-components?

попробуй так

export const SVG = styled.svg`
  transition: all 0.15s ease-in-out;
`;

Comments

[Дамир Шаниязов]

да ужж... я почему то подумал что для svg так не получится...