将Styled-Components拆分为多个文件，但将它们导出为一个文件

Question

When I was building my application, I didn't realize that I am going to end up with more than a hundred styled components. Consequently, I was putting them in the same file like this:

export const StyledTabs = styled(Tabs)`
  display: inline-flex !important;
  margin-left: 15% !important;
`;

export const StyledTab = styled(Tab)`
  display: inline-flex !important;
  margin-left: 0% !important;
  padding: 0 !important;
`;

... And the application imports them like this:

import { StyledTabs, StyledTitle } from "StyledComponents";

I want to split the StyledComponents.js file into multiple files by, for example, UI logic (header, footer, containers, etc..) but somehow, import them back into StyledComponents.js so I don't have to refactor the entire application.

Is something like this possible:

HeaderSC.js

export const StyledTabs = styled(Tabs)`
  display: inline-flex !important;
  margin-left: 15% !important;
`;

export const StyledTab = styled(Tab)`
  display: inline-flex !important;
  margin-left: 0% !important;
  padding: 0 !important;
`;

StyledComponents.js

import { StyledTabs, StyledTitle } from "../styling/HeaderSC";

..and then the app still referring to StyledTabs or any other styled component from StyledComponents.js file?

Answer 1

You can create a folder StyledComponents and inside that create a default import file index.js, from which all your exports will be facilitated.

In the very same folder create different files for different components like StyledTabs.js and StyledTitle.js then index.js of the very same folder you can do

export StyledTab from './StyledTab';
export StyleTitle from './StyledTitle';

This way your import { StyledTab } from 'path/to/StyledComponents' will work flawlessly