is there anything wrong with using classnames with styled components?

Rusty Shackelford 0
Viewed 21

Is there anything wrong with using classnames within styled components like so:

 export const StyledNav = styled.nav`
  background-color: ${({ theme }) => theme.backgroundSecondary};
  .logo-container {
    width: 201px;
    img {
      padding: 28px 24.47px 26.78px 24px;
    }
  }
`;

here I used the classname logo-container rather than making an entire new styled component for that.

styled-components reactjs
1 Answers

You can use nesting and SCSS-like combinations

See their official doc page, and refer to Pseudoelements, pseudoselectors, and nesting section.

It shows an example where, just as your snippet, one component is declared which contains nested selectors and class names.

There's nothing wrong with this approach, and it might actually be more efficient than creating every single element as a styled component.

Bumhan Yu0
Related