样式化组件 - 如何为作为道具传递的组件设置样式？答案

【问题标题】：Styled Components - How to style a component passed as a prop?样式化组件 - 如何为作为道具传递的组件设置样式？
【发布时间】：2020-08-29 15:50:15
【问题描述】：

我正在尝试构建这个简单的组件，它将标题和图标组件作为道具并呈现它们。我在这里使用的图标是第三方组件，例如 Material UI 中的那些。

option.component.jsx

import { Wrapper } from './option.styles';

function Option({ title, Icon }) {
   return (
      <Wrapper>
         {Icon && <Icon />}
         <h4>{title}</h4>
      </Wrapper>
   );
}

option.styles.js

import styled from 'styled-components';

export const Wrapper = styled.div`
   display: flex;
   color: grey;

   &:hover {
      color: white;
   }
`;

// export const Icon =

我已将所有样式整理在一个单独的文件中，并打算保持这种方式。
我想设置 <Icon /> 的样式，但我不想像这样在选项组件中这样做。

import styled from 'styled-components';
import { Wrapper } from './option.styles';

function Option({ title, Icon }) {
   const IconStyled = styled(Icon)`
      margin-right: 10px;
   `;

   return (
      <Wrapper>
         {Icon && <IconStyled />}
         <h4>{title}</h4>
      </Wrapper>
   );
}

在保持此文件组织的同时设置作为 prop 传递的组件样式的最佳方法是什么？

我浏览了文档，但找不到与此相关的任何内容。任何帮助将不胜感激。

【问题讨论】：

您可以从使用Option 组件的外部传递样式图标。 Icon 只是一个 prop 名称，您可以使用 Icon={StyledIcon} 传递任何组件。
Icon 组件是如何定义的？我的意思是，您如何将图标传递给选项？你能添加一个图标的例子吗？
@LuisPauloPinto 我在这里使用的图标来自 Material UI。我将它们作为传递给 Option。 HomeIcon 是从 Material UI 导入的。

标签： css reactjs styled-components

【解决方案1】：

您可以通过两种方式做到这一点：

1.作为 SVG 图标 (svg-icon)：

option.styles.js 为：

import styled from "styled-components";
import SvgIcon from "@material-ui/core/SvgIcon";


export const Wrapper = styled.div`
  display: flex;
  color: grey;

  &:hover {
    color: black;
  }
`;

export const IconStyled = styled(SvgIcon)`
  margin-right: 10px;
`;

在你的组件中，这样做：

import { Wrapper, IconStyled } from "./option.styles";

function Option({ title, Icon }) {
  return (
    <Wrapper>
      {Icon && <IconStyled component={Icon} />}
      <h4>{title}</h4>
    </Wrapper>
  );
}

const App = () => {
  return (
    <>
      <Option title="title" Icon={HomeIcon}></Option>
      <Option title="title" Icon={AccessAlarmIcon}></Option>
    </>
  );
};

2。作为字体图标 (font-icons)：

在<head>中导入素材图标

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

option.styles.js 为：

import styled from "styled-components";
import Icon from "@material-ui/core/Icon";

export const Wrapper = styled.div`
  display: flex;
  color: grey;

  &:hover {
    color: black;
  }
`;

export const IconStyled = styled(Icon)`
  margin-right: 10px;
`;

在你的组件中，这样做：

import { Wrapper, IconStyled } from "./option.styles";

function Option({ title, icon }) {
  return (
    <Wrapper>
      {icon && <IconStyled>{icon}</IconStyled>}
      <h4>{title}</h4>
    </Wrapper>
  );
}

const App = () => {
  return (
    <>
      <Option title="title" icon='star'></Option>
      <Option title="title" icon='home'></Option>
    </>
  );
};

【讨论】：