Разделение Styled-Components на несколько файлов, но экспорт их в один файл

Question

Когда я создавал свое приложение, я не понимал, что в итоге у меня будет более ста стилизованных компонентов.Следовательно, я помещал их в один и тот же файл следующим образом:

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;
`;

... И приложение импортирует их следующим образом:

import { StyledTabs, StyledTitle } from "StyledComponents";

Я хочу разделить StyledComponents.jsфайл в несколько файлов, например, с помощью логики пользовательского интерфейса (верхний колонтитул, нижний колонтитул, контейнеры и т. д.), но каким-то образом импортируйте их обратно в StyledComponents.js, чтобы мне не пришлось реорганизовывать все приложение.

Возможно ли что-то подобное:

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";

..а затем приложение все еще ссылается на StyledTabs или любой другой стилизованный компонент из StyledComponents.js файла?

Answer 1

Вы можете создать папку StyledComponents и внутри нее создать файл импорта по умолчанию index.js, из которого будет упрощен весь ваш экспорт.

В той же самой папке создайте разные файлы для разных компонентов, таких как StyledTabs.js и StyledTitle.js затем index.js из той же папки, которую вы можете сделать

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

Таким образом, ваш import { StyledTab } from 'path/to/StyledComponents' будет работать безупречно