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.

Answer

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!