如何将样式化组件导出到一个文件中？答案

【问题标题】：How to export Styled Components in one file?如何将样式化组件导出到一个文件中？
【发布时间】：2020-10-18 12:56:10
【问题描述】：

如果我有这样的样式化组件 JS 文件：

LoginLogo.js

export const LoginLogo = styled.img`
  margin-top: 150px;
  margin-bottom: 100px;
  margin-right: 100px;
  margin-left: 100px;
  height: 160px;
  width: 397px;
`;

FooterDiv.js

export const FooterDiv = styled.div`
  height: 100px;
  weight: 100%;
  background-color: blue;
  color: blue;
`;

...等等。我如何将它们一次全部导出到一个文件中，以便我可以在一个文件中引用它们？例如

App.js

import { LoginLogo, FooterDiv } from './AllInOne'

当我将 LoginLogo.js 和 FooterDiv.js 中的所有代码导出到一个文件中时，它会提示我没有默认导出。如果我将它们组合在一个常量中并将该常量导出为默认值，它会给我一个错误，说它找不到 LoginLogo 和 FooterDiv。我正在尝试减少我制作的文件数量。

【问题讨论】：

标签： javascript html css styled-components

【解决方案1】：

你可以做任何你想做的事，默认导出或命名导出。

例如命名导出：

// in AllInOne.js
export const LoginLogo = styled.img`
  margin-top: 150px;
  // ...
`

export const FooterDiv = styled.div`
  height: 100px;
  // ...
`;


// in App.js
import { LoginLogo, FooterDiv } from './AllInOne';

例如默认导出

// in AllInOne.js
const LoginLogo = styled.img`
  margin-top: 150px;
  // ...
`

const FooterDiv = styled.div`
  height: 100px;
  // ...
`;

export default {
  LoginLogo,
  FooterDiv
}


// in App.js
import allInOne from './AllInOne';
const { LoginLogo, FooterDiv } = allInOne;

应该可以了！

【讨论】：