Question

我正在使用 styled-components 图标库，它们有一个特殊的功能来设置所有图标的样式。我正在尝试使用它，但他们几乎没有关于该工具的任何文档，我无法弄清楚它应该如何使用。

来源：https://github.com/styled-icons/styled-icons

他们提供的示例：

// If you wish to style all icons at once, you can create a wrapper styled component 
// that imparts a particular style to all icons contained within the wrapper 
// by targeting the StyledIconBase component:

import styled from 'styled-components'
import {StyledIconBase} from '@styled-icons/styled-icon'

export const IconStyleWrapper = styled.div`
  ${StyledIconBase} {
    color: red;
    /* icon styles go here */
  }
`

我的 IconHandler 组件目前的样子：

import styled from 'styled-components';
import { Youtube } from '@styled-icons/fa-brands';
import { StyledIconBase } from '@styled-icons/styled-icon';

interface IBrandIcon {
  brand: 'youtube';
  size?: 'sm' | 'md' | 'lg';
}

const BrandIcon = ({ brand, size }: IBrandIcon): JSX.Element => {
  switch (brand) {
    case 'youtube':
      return (
        <IconStyleWrapper>
          <YoutubeIcon />
        </IconStyleWrapper>
      );
    default:
      return (
        <IconStyleWrapper>
          <YoutubeIcon />
        </IconStyleWrapper>
      );
  }
};

export default BrandIcon;

const YoutubeIcon = styled(Youtube)<{ size: IBrandIcon['size'] }>`
  color: ${({ theme }) => theme.agnosticStyles.brands.youtube};
  height: 6rem;
  width: 6rem;
`;

export const IconStyleWrapper = styled.div`
  ${StyledIconBase} {
    color: green;
    height: 6rem;
    width: 6rem;
    /* icon styles go here */
    ${YoutubeIcon} {
      color: orange;
    }
  }

  ${YoutubeIcon} {
    color: orange;
  }
`;

如果我不用 YoutubeIcon 包裹 IconStyleWrapper，它会按预期返回，很正常。但是，当我用 Wrapper 包裹它时，什么也没有出现。我不知道他们的文档是什么意思，但我真的可以使用单个入口点来建立图标的基本样式，但我无法弄清楚这需要什么。

如何设置样式组件“基本图标样式”

0 个答案: