Styled-Component / Emotion.js Является ли объектный стиль или шаблонный стиль предпочтительнее другого? - PullRequest
Новая
       40

Styled-Component / Emotion.js Является ли объектный стиль или шаблонный стиль предпочтительнее другого?

0 голосов
/ 13 октября 2019

Мне нравится cleanesss в стиле объекта 

const Button = styled.button(
  {
    color: 'darkorchid'
  },
  props => ({
    fontSize: props.fontSize
  })
)

, однако стиль шаблона (?) Кажется основным интерфейсом, который поддерживает больше функций, чем стиль объекта 

const Button = styled.button`
  color: hotpink;
`

Является ли css-Стиль строки (шаблона) предпочтительнее (или более функционально или поддерживается) по сравнению со стилем объекта в StyledComponent или Emotion.js?

  • Редактировать

Для одного различия, которое я знаю, я не знаюне думаю, что это можно сделать с помощью стиля объекта 

const dynamicStyle = props =>
  css`
    color: ${props.color};
  `

const Container = styled.div`
  ${dynamicStyle};
`

1 Ответ

0 голосов
/ 14 октября 2019

Литералы с тегами шаблона используются гораздо чаще, чем объекты, поскольку последний был введен в v3.4 . К этому времени компонент Styled уже был очень заметен.

Больше, чем внешний вид, нет никакой известной разницы. Я лично предпочитаю литералы шаблонов, потому что это дает ощущение и ощущение наличия настоящего CSS, если вы используете плагины IDE, такие как vscode-styled-components

Отредактировано

Вот код вашего отредактированного вопроса: 

const dynamicProps = props => css`
  background: ${props.color};
  font-size: ${props.fontSize};
`;

const SquareOne = styled.div(
  {
    width: "100px",
    height: "100px",
    background: "blue" // will be overwritten by dynamicProps
  },
  dynamicProps
);

Песочница

...