Discussion on: How are you using Styled Components?

[Justice Otuya]

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