Styled components and scoping

Question

I'm starting to work with styled components and had a question about scoping. This is just a dummy example but one that shows the point.

So I have a component. I setup a styled div called Wrapper then instead of creating another styled component to handle group, I thought be easier to just add a class to the inner div called .group and using nesting like in scss to style the inner div. This works but the problem with using className for the inner div is there could be a collision with global styles called .group

So is there a way to avoid this with scoping somehow or would I have to create another styled component called Group to handle that inner css ? Seems like a lot of boilerplate to have to add another styled component just to style the inner components.

   const Wrapper = styled.div`
      color: blue;

      .group {
        padding: 10px;
        color: green;
      }
    `
  const MyComponent = () => {  
    return (
      <Wrapper>
        <div className='group>
         <h1>heading text</h1>
         <h2>subheading text</h2>
        </div>
        <div>This is my blue text</div>
      </Wrapper>
    );
}

Here is my globalStylesheet with group. Obviously this only has one style but it could have way more to handle grouped elements globally.

export default createGlobalStyle`

  h1, h2, h3, h4, h5, h6 {
    font-family: '.....';
  }
  .group {
    background-color: red;
  }
`;

I know I could also do

  > div {
    border: 1px solid red;
  }

but I want to be able to be more explicate with a className

Sabit Rakhim Sabit Rakhim · Accepted Answer · 2020-05-12T06:47:23

I think it's better to create another styled-component for group like

const Group = styled.div`
  padding: 10px;
  color: green;
`

So you can be sure that overwriting styles properly. And if there will be more styles in Wrapper, it stays less readable. Also you can easily replace Group component into children or make as parent(in this case you should rewrite .group style from Wrapper to another one).

In future to prevent boilerplate code you can rewrite existed styled-components like

const Timer = styled.div`
  background: #ff5f36;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: GTWalsheim;
  font-size: 32px;
  color: #ffffff;
`

const TimeIsUp = styled(Timer)`
  width: 172px;
  border-radius: 8px;
`

EDIT

Also you can easily replace Group component into children or make as parent

I'll try to explain in code below

  const MyComponent = () => {  
    return (
      <Wrapper>
        <div className='someClass>
         <Group>  // so you can replace only your component, without rewriting any style 
           <h1>heading text</h1>
           <h2>subheading text</h2>
         </Group>
        </div>
        <div>This is my blue text</div>
      </Wrapper>
    );
  }

I mean you can easily replace Group component to any place of code. While when you write style from parent as it was in Wrapper, you should replace this .group style from Wrapper to another element which is parent for .group

Styled components and scoping

1 Answers