Блог

Допустим, у меня есть кнопка стиля со следующей структурой;

 <StyledButton className={`button-${id}`}>{content}</StyledButton>
 

Где кнопка стиля

 const StyledButton = styled.button`
  ...
`;
 

Я хотел бы указать дополнительные стили, которые будут применяться, если имя класса кнопки равно значению. Какой селектор я мог бы использовать в кнопке стиля для применения стилей, если кнопка стиля имеет указанный класс?

Вы всегда можете добавить встроенные функции внутри литерала шаблона стилизованных компонентов. Вы получаете props в качестве первого аргумента.

 const StyledButton = styled.button`
    ${props => props.className === 'foo-bar' amp;amp; css`
        color: red;
    `};
`;
 

Если вы не уверены, что props получаете, вы можете легко проверить по:

 const StyledButton = styled.button`
    ${console.log};
`;