Styled components и className?

Question

[Андрей Охотников]

Норма ли комбинировать Styled-components и className , например SC использовать для элемента родителя, а все вложенные элементы помечать className.
Получится так

const List = styled.div`
  list style;

  .list-title {
    
  }

  .list-item {

  }
`

Или лучше так

const List = styled.div`
  list style;
`

const ListTitle = styled.div`
  title style;
`

const ListItem = styled.div`
  item style;
`

Answer 1

[Антон Спирин]

Или лучше так

Почему так делать не стоит:
1. Страдает изоляция. Любая сторонняя библиотека с ccs может поломать ваш код в самых неожиданных местах.
2. Возможные проблемы при изменении структуры.
3. Возможные проблемы при добавлении свойств состояния, от которых будет зависеть верстка. Придется по-старинке плодить селекторы состояния или прокидывать свойства через родителя.

Если больше нравится второй подход, то стоит посмотреть в сторону css модулей.

Answer 2

[Павел Антонов]

Лучше второй вариант, иначе какой смысл от этого

Comments

[Андрей Охотников]

Так и делаю, но с первым способом удобнее работать со вложенностью и не нужно создавать лишних styled компонентов