How to server styled-components?

[chiralium]

Hello everyone.

In our project we are making decision to migrate our codebase from Less to SC. After 50% complete, we are notice some misunderstanding in team about how to serve styled components.

We are highlight three methods and each having some problem.

Note: we are store styled components inside seperate file styled.tsx.

1. Store styled components inside object for semantic import:

export const Styled {
  Button: styled.button``,
  SuperList: styled(List)``,
  
  // problem
  // need to get SuperList classname
  SuperListContainer: styled.div`
    // some styles
    {Styled.SuperList} {
      // fail: Styled is not already declared!
      // some styles
    }
  `
}

2. Store styled components like vars:

import {Button} from 'components/Button';

const Button = styled(Button)``; // fail: need to create unique name for Button (what if I need only 8px margin-top?

3. Store styled componens as class with static fields:

import {Button} from 'components/Button`;

export class Styled {
  public static Button = styled(Button)``; // OK
  public static SuperList = styled.ul``;
  public static ListContainer = styled.div`
    ${Styled.SuperList} { // OK
      padding: 2rem;
    }
  `;
}

but in this method HMR (hot reload not working properly) changes not applied without page reloading.

What is the best practice to serve styled-components?

We need two goal:

1. Able to using classname of styled component inside another styled component style.
2. Able to not think about component's name if style modification not enough for good naming (example: button with extra padding)