如何使用样式化组件将样式应用于多个组件答案

【问题标题】：How to apply styles to multiple components using styled components如何使用样式化组件将样式应用于多个组件
【发布时间】：2021-03-24 21:37:40
【问题描述】：

我创建了一个 icon.js 文件。它将 3 个 SVG 组件导出到不同的文件。像这样：

export const MenuIcon = () => {
  return (
    <svg>
      ...
    </svg>
  );
};

export const ArrowLeftIcon = () => {
  return (
    <svg>
   ...
    </svg>
  );
};

export const SearchIcon = () => {
  return (
    <svg>
      ...
    </svg>
  );
};

我想使用样式化的组件将相同的样式应用于所有这三个组件，而不是给它们一个相同的类名。有解决方案吗？谢谢你:)

【问题讨论】：

标签： javascript reactjs components styled-components

【解决方案1】：

我认为以下步骤可以帮助您。

步骤

npm i styled-components@4.1.3
从 'styled-components' 导入样式；

const StyledSvg = styled.svg` <---the html tag that you want to style
  color: palevioletred;       <---the css styles that you want to use
`;

现在使用您刚刚创建的 StyledSvg 代替 svg 标签。
```
return(
    <StyledSvg>
    ...
    </StyledSvg>
);
```

【讨论】：