设置组件样式的最佳方式？

Question

我有两种解决方案来设计我的组件。选择哪个更好？

第一个选项是设置样式组件中的所有内容。
第二个选项是使用多个容器和一个一个容器的样式。

第一个选项：

export const BaseContainer = styled.div`
  span {
    color: #E0E0E0;  
  }
  i {
     margin-right: 16px;
    }
`;

<BaseContainer data-testid="base">
   <i className="icon-share" />
   <span> {base} </span>
</BaseContainer>

第二个选项：

export const BaseContainer = styled.div`
  color: #E0E0E0; 
`;
export const IconContainer = styled.div`
  margin-right: 16px;
`;

<IconContainer>
  <i className="icon-share" />
</IconContainer>
<BaseContainer data-testid="base">
  {base} 
</BaseContainer>

Answer 1

我会选择 第二个选项 因为第一个选项将 2 个元素结合在一起 div 如果你想使用相同的 css 在另一种情况下，属性需要重构。

但请注意，您的第二个选项与第一个选项的差别并不小：

In your first option you have one div with one i and one span inside of it and you are applying style to i and span correspondingly.

In your second option you have 2 separate div one with one i and the other with just a content and you are applying style to both div instead.

也就是说，最好的解决方案是在 div 中实际设置 span 和 i 的样式，例如

const StyledSpan = styled.span`
    color: #E0E0E0;
`

const StyledIcon = styled.i`
    margin-right: 16px;
`

然后将它们用作：

<div data-testid="base">
  <StyledIcon className="icon-share" />
  <StyledSpan>{base}</StyledSpan>
</div>

Answer 2

我认为这有点基于意见，但我会这样处理：

const IconContainer = styled.i`
  margin-right:16px;
`;

const Icon = ({ 
    iconType, 
    ...props}) => <IconContainer className={ `icon-${iconType}` } {...props } />;

const BaseContainer = styled.div`
   color: #E0E0E0;
`;

const LabelledIcon = ({ iconType, ...props }) => <BaseContainer>
    <Icon iconType={ iconType } />
   { props.children }
</BaseContainer>;

// usage:
<LabelledIcon iconType="share"> icon label text </LabelledIcon>

设置组件样式的最佳方式？

Best way to style a component?

reactjs

styled-components