My implementation, in a simple example, goes something like this:

import React from 'react';
import styled from 'styled-components'; // 1. Import styled-components

const AComponentStyled = styled(AComponent)`` // 2. Create styled variant

function AComponent({ className }) { // 3. Receive className prop

  //...

  return (
    // 4. Pass className prop to JSX root
    <div className={className} /> 
  )
} 

export default AComponentStyled; // 5. Export styled variant

Of course, the CLI generalizes this example to any component, and supports Typescript, using a named export (instead of the default export), etc.

Most examples out there used the component-specific variants, such as styled.h1, but to me it felt that the more generic styled(component) are more useful - however if you are using the component-specific variants, do tell!

Yeah, I have worked quite a bit with styled components actually. It is hands down my prefered way of styling things in React projects.
It can be a bit difficult to set up with TypeScript and the syntax for variables is a bit verbose - but it works extremely well!

I use styled components gritting my teeth and getting nervous every time when I have to come into contact with it. I recommend that you do tooling, because right now it works very sadly in vscode sublime-text and and elsewhere. problems in the absence emmet, error-free work stylelint , and other nightmares. get busy with tools at last!

Styled components are cool until it starts to affect other components

Mostly for small reusable components. I try to keep it simple with styled components and not abuse them. I moved away from them for css heavy projects. Also theming is really easy so that is something I always use. I normally don't use all the features like style extension. I try to stay on the basic parts of the lib as the advanced features add a bit of complexity that make them harder to use in large code bases

CSS modules is the cleanest approach for me.

Styled components respect no separation of concerns and are verbose

Both styled-components and emotion.js are using stylis.js to parse styles. So personally I prefer goober.js which is less than 1kb

But please check the benchmarks before you change your library.

Tip: use bundlephobia.com to inspect the size of styled-components

so how i use styled components is that the main container in the component is a styled component and everything inside the components are normal classes,

example

COMPONENT.TSX

const Container = ({...props}) => {

return (<StyledContainer props={currentColor,...propsIWantToUseInTheCSS}>
              <div className="box__red_or_blue">
             ......
              </div>
          </StyledContainer>)
}

COMPONENT.STYLE.TS

export const StyledContainer = styled.div({currentColor:string}) => {
//style here are for styling the component itself, then you can add classes which are elements inside the styled component

padding:30px;
margin:20px
....

//element with a className inside the styled component, the styled component takes a  color props and passes it to the className

.box__red_or_blue {
color: ${props} => props.currentColor === "red" ? "red" : "blue"}
}

}

since styled-components generate classes for each component, it will be hard to get clashes as the elements with classes and encapsulated and embedded with the styled component