CODEWITHSUNDEEP
javascripthtmlcssstyled-components
Jpark9061
Jpark9061

Reputation: 1080

How to export Styled Components in one file?

If I have Styled Component JS files like this:

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;
`;

... and more. How would I export them all at once in one file so I could refer to them in one file? For example

App.js

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

When I export all of the code from both LoginLogo.js and FooterDiv.js in one file, it gives me an error saying theres no default export. If I group them up in one constant and export that constant as default, it gives me an error saying it can't find LoginLogo and FooterDiv. I'm trying to reduce the amount of files I make.

Upvotes: 1

Views: 1221

Answers (2)

Swansson
Swansson

Reputation: 31

In AllInOne.js you could write something like this:

export let SC = {
   LoginLogo: styled.img`
     margin-top: 150px;
     margin-bottom: 100px;
     margin-right: 100px;
     margin-left: 100px;
     height: 160px;
     width: 397px;
   `,
   FooterDiv: styled.div`
     height: 100px;
     weight: 100%;
     background-color: blue;
     color: blue;
   `
}

And in your App.js you can import all components like:

import { SC } from "./AllInOne"

Then you can call them like that:

<SC.FooterDiv></SC.FooterDiv>

Upvotes: 0

ShinaBR2
ShinaBR2

Reputation: 2705

You can do whatever you want, default export or named export.

For example named export:

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

For example default export

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

It should works!

Upvotes: 1

Related Questions