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.
Dessa forma fica separado por arquivo? Tipo nesse seu exemplo tem um Container.tsx e Title.tsx?
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 (
<S.List>
<S.Item>item 1</S.Item>
<S.Item>item 2</S.Item>
</S.List>
)
Confira o projeto implementado com esse PATTERN aqui: Projeto do curso REACT AVANÇADO - WILLIAN JUSTEN