Question

我有2种解决方案来设置组件样式。哪一个是更好的选择？

第一个选项是设置样式化组件中的所有内容。第二种选择是使用许多容器，并一一使用容器样式。

第一个选项：

Map<String, Object> values = new HashMap<>();
values.put("gname", userName)
values.put("email", reEmail)
values.put("photoUrl", userpicUrl)
googleRef.child(userId).setValue(values)

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;
`;

Answer 1

我会选择第二个选项，因为第一个选项将一个div中的2个元素联系在一起，如果您想在另一种情况下使用相同的CSS属性，则需要重构。

但是请注意，您的第二个选择与第一个选择的区别并不大：

在第一个选项中，您有一个div，其中一个i和一个span，并且您正在将样式应用于i和{{1 }}。



在第二个选项中，您有2个单独的span，其中一个包含一个div，另一个仅包含一个内容，而您将两种样式都应用于i。

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

然后将它们用作：

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

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

希望有帮助。

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>

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

2 个答案: