如何将自定义样式添加到样式组件？

Posted 2023-03-15

【中文标题】如何将自定义样式添加到样式组件？

【英文标题】：How to add custom styled to a styled component?

【发布时间】：2021-06-12 09:33:58

【问题描述】：

我有一个样式组件<Icon type="loader"/>。我想通过向此 Icon 组件添加一些自定义样式来创建另一个样式化组件。我需要将type 传递给 Icon 组件，我该如何实现？

const loader = styled(Icon)` font-size:'inherit'`

在没有任何道具的情况下直接传递图标可以正常工作。

我试过这个： const CustomIcon = () => <Icon type="loader"/>

const loader = styled(CustomIcon)` font-size:'inherit'`

这会出错。

【问题讨论】：

第一种方式 (const loader = styled(Icon)` font-size:'inherit'`) 似乎应该可以工作，尽管它应该是const Loader = styled(Icon)` font-size:'inherit'`，因为您要返回一个 React 组件。你有什么问题？

【参考方案1】：

我认为你的第一种方法就足够了。

const Loader = styled(Icon)`
  font-size: inherit;
`;

您可以将type="loader" 传递给Loader：

<Loader type="loader" />

你也可以在定义Loader时指定type属性：

const Loader = styled(Icon).attrs(() => (
  type: 'loader',
))`
  font-size: inherit;
`;

用法：

<Loader /> // type="loader" passed to styled Icon

演示

演示代码：

const Icon = styled(( type, ...props ) => 
  switch (type) 
    case "loader":
      return <div ...props className=props.className + " loader" />;

    default:
      return <div ...props />;
  
)`
  font-size: 3rem;

  &.loader 
    color: red;
  
`;

const Loader = styled(Icon).attrs(() => (
  type: "loader"
))`
  font-size: initial; // overrides Icon fontsize
`;

...

<Icon>Test</Icon>
<Icon type="loader">Test</Icon>
<Loader>Test</Loader>