import export styled component reactjs

Question

i want to split page between styling and app

example

in page style.js

import styled from "styled-components";

//i dont know how to export all const
export const Container = styled.div`
  display: flex;
  flex-direction: row;
`;

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

and in page app.js

import * as All from "./style.js"
//i dont know, how to import all const in style.js


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

how to export and import all const when const in style.js there are so many?

Answer 1

another option you can export like this :

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}

and you can import like this :

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


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