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?

What you've done in page-style.js is fine, now just import {Container, Sidebar} from "page-style.js" — Brendan Bond
– Brendan Bond, Commented Jan 24, 2022 at 3:20

Ilham Naufal · Accepted Answer · 2022-01-24 03:05:53Z

2

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>
 );
}

answered Jan 24, 2022 at 3:05

Ilham Naufal

613 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Dae Hyeon Mun · Accepted Answer · 2022-01-24 03:26:00Z

0

There is a beautiful way to do that. This way also let you know which component is styled-component or single component.

// 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>
 );
}

answered Jan 24, 2022 at 3:26

Dae Hyeon Mun

5364 silver badges8 bronze badges

Comments

Pete Meehan · Accepted Answer · 2022-06-05 17:44:07Z

0

Dae Hyeon Mun's approach is great, but you can simplify it further and avoid having to refactor your styles.js file by using a wildcard import, which essentially creates a module object so you don't have to!:

// 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

answered Jun 5, 2022 at 17:44

Pete Meehan

1

Comments

mihai · Accepted Answer · 2022-12-23 20:59:41Z

0

You can use "export const" like you already did for exporting. The simplest way to import those const is:

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>

edited Dec 23, 2022 at 20:59

answered Dec 23, 2022 at 20:59

mihai

13 bronze badges

Collectives™ on Stack Overflow

import export styled component reactjs

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related