传递组件并使用solidjs和TypeScript为其添加样式

Question

我的网络应用程序中有几个图标，如下所示：

type IconProps = ComponentProps<"svg">

const Icon = (props: IconProps) => {
  const [, rest] = splitProps(props, ["class"])
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class={cn("", props.class)}
      {...rest}
    />
  )
}

export function IconUser(props: IconProps) {
  return (
    <Icon {...props}>
      <path .... />
    </Icon>
  )
}

接下来我想编写以下组件来接收各种图标之一并渲染它。但是我需要能够将 style 属性添加到给定的图标。

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: <SettingButton title={"Test"} icon={<IconUser />} onPress={() => {}} />

请注意，我使用的是solidjs，因此据我所知，cloneElement 不可用。

我也知道我可以将其包装在 div 中并在那里应用样式，但我想知道如何正确执行。

Answer 1

老实说，我对 SolidJS 一无所知，但我想出了一个快速代码（通过在 Codesandbox 中尝试），它可能会为您完成工作：

const SettingButton = (props) => {
  const Icon = props.icon;
  return (<Icon style={{ color: "red" }} />)
}

function IconUser(props) {
  return <h1 style={props.style}>Test</h1>
}

function App() {
 return ( <SettingButton icon={IconUser} /> );
}