quiero dividir la página entre el estilo y la aplicación
ejemplo
en estilo de página.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; `;y en la página 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> )}¿Cómo exportar e importar todas las const cuando const en style.js hay tantas?
otra opción que puedes exportar así:
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}y puedes importar así:
import { Container,Sidebar } from './style'; function App() { return ( <Container> <Sidebar> </Sidebar> </Container> ); }Hay una hermosa manera de hacer eso. De esta manera, también le permite saber qué componente tiene estilo o componente único.
// 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> ); }El enfoque de Dae Hyeon Mun es excelente, pero puede simplificarlo aún más y evitar tener que refactorizar su archivo styles.js mediante el uso de una importación de comodines , que esencialmente crea un objeto de módulo para que no tenga que hacerlo:
// 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> ); }Más detalles: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#creating_a_module_object