--

Hey, thank you for your comment! That's a good catch, I will update my article to explain why it's not the best possible solution. Here is a small explanation. Imagine, that you have component A and component B, each of them has file "styled.tsx", with the next content: `export const Wrapper = styled.div``.

To organize your styled component in way of storing them in the word "S", you can use import * as S from './styled'

But, we still have a problem with import chaos.

So, what do I mean? You have an issue, that, component B, can get direct access to Wrapper from component A. Also, when you will write your jsx, you will get suggestions from IntelliSense to import Wrapper.

But, our main goal, is to make styled-components, visible only through S, and do not have direct access to the specific styled components.

--

--

No responses yet