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

Question

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

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

不带任何道具直接传递图标就可以了。

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

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

这给出了错误。

Answer 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>

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

How to add custom styled to a styled component?

user-interface

reactjs

styled-components

css-in-js

演示