Muito interessante esse Design Pattern. Eu já utilizei dessa forma conforme aprendi no curo React Avançado do Willian Justen. Ele utiliza:

export * as S from './styles';

Dessa forma pra colocar os componentes visuais na tela fica assim:

<S.Container>
    <S.Title>Título da página</S.Title>
</S.Container>

Eu acho muito legal essa forma pois não precisamos ficar trocando de aba pra ver o nome que a gente deu pra um determinado estilo.

Reacthá 2 anos

Dessa forma fica separado por arquivo? Tipo nesse seu exemplo tem um Container.tsx e Title.tsx?

adailsonaguiarhá 2 anos
Não. Nesse caso estamos falando de estilos de um componente só. Por exemplo: Temos o componente no **styles.ts** dele temos ``` import {styled} from 'styled-components' const List = styled.ul` background: red; `; const Item = styled.li`` ``` e no **index.tsx** teremos: ``` import * as S from './styles.ts' return ( item 1 item 2 ) ``` Confira o projeto implementado com esse PATTERN aqui: [Projeto do curso REACT AVANÇADO - WILLIAN JUSTEN](https://github.com/adailsonaguiar/wongames-cliente)