Множественные оценки в литерале шаблона ... Как я могу улучшить свои вычисления заполнения для styled-компонентов?

Question

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

export const Button = styled.button`
  padding: ${props => (props.primary ? rhythm(0.65) : rhythm(0.5))} ${props => (props.primary ? rhythm(1.6) : rhythm(1))};
`

Кроме того, Преттир форматирует предыдущий код следующим образом. Это недействительно css и поэтому не работает. Это ошибка красивее или мой код просто ужасен?

Broken:

export const Button = styled.button`
  padding: ${props => (props.primary ? rhythm(0.65) : rhythm(0.5))}
    ${props => (props.primary ? rhythm(1.6) : rhythm(1))};
`

Answer 1

Вы можете сгенерировать оба значения с помощью одной строки шаблона. Было бы удобнее создать простую функцию, которая генерирует строку:

const rhythm = v => `${v}em`; // mock

const getPadding = (a, b) => `${rhythm(a)} ${rhythm(b)}`

const Button = styled.button`
  padding: ${props => (props.primary ? getPadding(0.65, 1.6) : getPadding(0.5, 1))};
`

ReactDOM.render(
  <div>
    <Button primary>Primary</Button>
    <Button>Not primary</Button>
  </div>,
  root
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/4.4.0/styled-components.js"></script>

<div id="root"></div>