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

时间:2020-08-29 15:50:15

标签: css reactjs styled-components

我正在尝试构建一个简单的组件,该组件将title和Icon Component作为道具并进行渲染。我在这里使用的图标是第三方组件,例如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 />的样式,但是我不想在这样的Option Component中进行设置。

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>
   );
}

在维护此文件组织的同时,对作为道具传递的组件进行样式设置的最佳方法是什么?

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

1 个答案:

答案 0 :(得分: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>
    </>
  );
};