Styled components and className?

Question

css

Is it ok to combine Styled-components and className , for example, use SC for the parent element, and mark all nested elements with className.
It will turn out like this

const List = styled.div`
  list style;

  .list-title {
    
  }

  .list-item {

  }
`

Or is it better

const List = styled.div`
  list style;
`

const ListTitle = styled.div`
  title style;
`

const ListItem = styled.div`
  item style;
`

Answer 1

Or is it better

Why you should not do this:
1. Isolation suffers. Any third party library with ccs can break your code in the most unexpected places.
2. Possible problems when changing the structure.
3. Possible problems when adding state properties, on which the layout will depend. You will have to produce state selectors in the old fashioned way or pass properties through the parent.
If you like the second approach more, then you should look towards css modules.

Answer 2

The second option is better, otherwise what's the point of this