Передайте компонент и добавьте к нему стиль с помощью SolidJs и TypeScript. ⇐ Javascript

[Anonymous]

В моем веб-приложении есть несколько значков, которые выглядят следующим образом:

Код: Выделить всё

type IconProps = ComponentProps

const Icon = (props: IconProps) => {
const [, rest] = splitProps(props, ["class"])
return (

)
}

export function IconUser(props: IconProps) {
return (



)
}

Далее я хочу написать следующий компонент, который будет получать один из различных значков и отображать его. Однако мне нужна возможность добавить свойство стиля к данному значку.

Код: Выделить всё

export const SettingButton = (props: {
title: string;
icon: ?; // JSX.Element maybe?
onPress: () => void;
}) => {
const { hovering, hoveringProps } = useHovering();
const responsive = useResponsiveV2();
const color = () => {
if (hovering()) {
return c.colors.text.secondary;
}
return c.colors.text.tertiary;
};
return (
? // {props.icon} works but I want to add the style prop to it here
// Ideally {props.icon style={{color: color()}}}
)

// Usage:  {}} />

Обратите внимание, что я использую SolidJs, поэтому, насколько мне известно, cloneElement недоступен.
Кроме того, я знаю, что могу обернуть это в div и применить стиль есть, но мне интересно, как это сделать правильно.

Подробнее здесь: https://stackoverflow.com/questions/793 ... typescript