Какова реальная разница между использованием встроенного стиля и использованием библиотеки css -in- js в стиле компонентов в React? - PullRequest
Новая
       88

Какова реальная разница между использованием встроенного стиля и использованием библиотеки css -in- js в стиле компонентов в React?

0 голосов
/ 09 марта 2020

Написание встроенного стиля в js, 

const styles = {
    background: 'blue',
    color: 'white'
}

и использование его в JSX, как показано ниже 

<div style={styles}> I am a div </div>

Написание стилей используя 'стилизованные компоненты', 

const Div= styled.div`
     background: 'blue',
     color: 'white'
`

и используя его как 

<Div> I am a Div </Div>

В чем разница с использованием библиотеки css -in- js и используя встроенные стили.

1 Ответ

1 голос
/ 09 марта 2020

Во-первых, ваш styled.div пример неверен, как в CSS -in- JS вы пишете фактический CSS, а не как объектный стиль: 

// "Real CSS"
const Div= styled.div`
  background: blue;
  color: white;
`

Второй, CSS классы, как правило, лучше r, кроме того, встроенные стили считаются плохой практикой, поскольку трудно повторно использовать и поддерживать стили.

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

Итак, в заключение:

  1. Во встроенных стилях вы пишете стили, подобные объектам, против фактических CSS
  2. Запись CSS позволяет использовать все преимущества CSS (например, селекторы).
  3. Повторное использование и поддержка CSS намного проще, чем встроенные стили.
  4. Реальная дискуссия между CSS -в- JS против CSS модулей против SASS против нормальных CSS (для этого вы можете гуглить или читать связанные вопросы в SO).
  5. Встроенные стили считаются плохой практикой как кроме того, они переопределяют все определенные стили.
  6. Встроенные стили ограничены в своей функциональности (попробуйте анимировать что-нибудь (например, встроенный стиль или даже реализация медиазапроса).
...