Каков наилучший способ добавить условный стиль с помощью styled-components & styled-system?

Question

Я пытаюсь создать компонент кнопки с помощью styled-system и styled-components.

Варианты styled-system работают отлично, но мне интересно, как добавить условную CSS.Например, я пытаюсь отобразить кнопку первичного блока.

const StyledButton = styled(Button)`
  ${props => props.block && css`width: 100%;`
`;

// primary
<StyledButton block variant="primary" />

Это работает, как и ожидалось, но я хотел бы знать, есть ли лучший способ применить block красивым способом с чистым javascript.

Answer 1

Я думаю, что вы можете сократить свой конкретный пример следующим образом (вам не нужно использовать css метод там):

const StyledButton = styled(Button)`
  ${({block}) => block && 'width: 100%;'}
`;

Но, как правило, я считаю, что это единственный способ сделать это,Мне это не кажется уродливым, но если у вас есть сложные условия, вы, вероятно, можете переместить некоторый код в отдельные переменные или функции с описательными именами.