Лучший способ стилизовать компонент?

Question

У меня есть 2 решения для стилизации моего компонента. Какой из них лучше?

Первый вариант - установить все в стилизованном компоненте. Второй вариант - использовать несколько контейнеров и стили один за другим.

Первый вариант:

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 в другом случае, потребуется рефакторинг.

Но имейте в виду, что ваш второй вариант не очень отличается от первого:

• В первом варианте у вас есть один div с одним i и однимspan внутри него, и вы применяете стиль к i и span соответственно.

• Во втором варианте у вас есть 2 отдельных div один с одним i, а другой только с контентом, и вместо этого вы применяете стиль к обоим 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>