导入导出样式组件 reactjs

Question

我想在样式和应用之间拆分页面

例子

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

并在第 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>
)}

style.js中的const那么多，如何导出和导入所有的const？

Answer 1

您可以像这样导出另一个选项：

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}

您可以这样导入：

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


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

Answer 2

有一个很好的方法可以做到这一点。这种方式也让你知道哪个组件是 styled-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>
 );
}

导入导出样式组件 reactjs

import export styled component reactjs

javascript

css

styles

reactjs