Question

我正在使用Atomic Design创建样式化的组件，我想将样式化的文件分离到一个文件夹中，并使用一个index.js导出所有文件。我发现可以这样进行：Splitting Styled-Components into multiple files but export them as one file，但是对于我来说，我想在index.js内导出文件

export StyledClosestMeet from 'styledComponents/StyledClosestMeet.js';

我有错误

需要声明或声明。ts（1128）

在styledComponents文件夹中，我还有第二个文件：

import styled from 'styled-components';
import variables from 'settings/variables';

const StyledClosestMeet = styled.div`
  color: ${variables.colorMain};
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
`;

然后我想将该文件导入Atom文件中：

import React from 'react';
import {StyledClosestMeet} from 'styledComponents/StyledClosestMeet';

const ClosestMeet = () => {
  return <StyledClosestMeet>Najbliższe spotkanie</StyledClosestMeet>;
};

export default ClosestMeet;

我正在使用jsconfig“ baseUrl”：“ ./src”

Answer 1

您可以创建一个index.js文件来导出两个文件，如下所示：

export { default as Styled1 } from "./styled1";
export { default as Styled2 } from "./styled2";

然后像这样导入它们：

import { Styled1, Styled2 } from "./styled/index";

查看此example

Answer 2

您必须导出StyledClosestMeet

import styled from 'styled-components';
import variables from 'settings/variables';

const StyledClosestMeet = styled.div`
  color: ${variables.colorMain};
  font-size: 2rem;
  font-weight: bold;
  text-transform: uppercase;
`;

export { StyledClosestMeet }

您可以按如下所示导出StyledClosestMeet。

export { StyledClosestMeet } from 'styledComponents/StyledClosestMeet.js';

反应-无法从index.js中导出多个文件

2 个答案: