另一个选项，你可以这样导出：

import styled from "styled-components";

const Container = styled.div`
  display: flex;
  flex-direction: row;
`;

const Sidebar = styled.div`
  width: 20%;
  height: 100%;
  background-color: #f9f9f9;
`;

export {Container,Sidebar}

您可以这样导入：

import { Container,Sidebar } from './style';

function App() {
 return (
  <Container>
   <Sidebar>
   </Sidebar>
  </Container>
 );
}

有一种很好的方法可以做到这一点，这种方法还可以让你知道哪个组件是样式化的组件还是单个组件。

// style.js
export const Styled = {
    Container: styled.div`
        display: flex;
        flex-direction: row;
    `,
   
    Sidebar: styled.div`
        width: 20%;
        height: 100%;
        background-color: #f9f9f9;
    `,
}

import { Styled } from './style';

function App() {
 return (
  <Styled.Container>
   <Styled.Sidebar>
   </Styled.Sidebar>
  </Styled.Container>
 );
}

Dae Hyeon Mun's approach非常棒，但是您可以使用通配符导入来进一步简化它，从而避免重构styles.js文件，这实际上创建了一个模块对象，因此您不必这样做!：

// style.js
export const Container = styled.div`
  ...
`;

export const Sidebar = styled.div`
  ...
`;

// app.js
import * as Styled from './style';

function App() {
 return (
  <Styled.Container>
   <Styled.Sidebar>
   </Styled.Sidebar>
  </Styled.Container>
 );
}

More details: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#creating_a_module_object

你可以使用"export const"，就像你已经做过的导出一样。导入这些常量的最简单的方法是：

import * as styled from "./style.js"
//this will import all 'export const' containing 'styled' from "./style.js"

function App(){
return(
<Container>
<Sidebar>
</Sidebar>
</Container>
)}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>