如何在不同的 React 组件之间重用 styled-components？

Question

我在不同的组件之间使用类似的布局，我希望能够重用创建布局的样式化组件。

   const CoreContainer = styled.div`
   display: flex;
   xjustify-content: center;
   flex-direction: column-reverse;
   @media (min-width: 1025px) {
       flex-direction: row;
   }
   height:100%;
`;
const FirstContainer = styled.div`
   text-align:center;
   background-color:#F8F8FA;
   width:100%;
   padding-top:4rem;
   align-items: center;
   justify-content: center;
   display: flex;      
   @media (min-width: 1025px) {
       xmin-width:700px;
       width:68%;
   }

`;
const SecondContainer = styled.div`
   display:flex;
   width:100%;
   @media (min-width: 720px) {
       -webkit-box-shadow: -1px 0 10px 0px rgba(0, 0, 0, 0.1);
       box-shadow: -1px 0 10px 0px rgba(0, 0, 0, 0.1);
       box-sizing: border-box;

       display: flex;
       justify-content: center;

   } 
   @media (min-width: 1025px) {
       width:33%;
   } 
`;
export class GeneralComponent extends Component{
 render(){
   if(this.props.value){
     return <ComponentA />
   }
   else{
     return <ComponentB />
   }
 }
}


//In a differnent file


export class ComponentA extends Component{
 render(){
   return(
   <CoreContainer>
     <FirstContainer>
       { someContentA}
     </FirstContainer>
     <SecondContainer>
       {otherContentA}
     </SecondContainer>
   </CoreContainer>);
 }
}

//In a differnent file


export class ComponentB extends Component{
 render(){
   return(
   <CoreContainer>
     <FirstContainer>
       { someContentB}
     </FirstContainer>
     <SecondContainer>
       {otherContentB}
     </SecondContainer>
   </CoreContainer>);
 }
}

我希望能够在不同的 React 组件中使用 coreContainer、firstContainer 和 SecondContainer，有没有办法在不同的组件之间重用样式组件 css 所以如果我改变了布局会在两个组件中发生变化，我没有重复的代码？

谢谢。

Answer 1

我想你在看这样的东西？

div.CoreContainer{
   display: flex;
   xjustify-content: center;
   flex-direction: column-reverse;
   @media (min-width: 1025px) {
       flex-direction: row;
   }
   height:100%;
}
div.FirstContainer{
   text-align:center;
   background-color:#F8F8FA;
   width:100%;
   padding-top:4rem;
   align-items: center;
   justify-content: center;
   display: flex;      
   @media (min-width: 1025px) {
       xmin-width:700px;
       width:68%;
   }
}
div.SecondContainer{
   display:flex;
   width:100%;
   @media (min-width: 720px) {
       -webkit-box-shadow: -1px 0 10px 0px rgba(0, 0, 0, 0.1);
       box-shadow: -1px 0 10px 0px rgba(0, 0, 0, 0.1);
       box-sizing: border-box;

       display: flex;
       justify-content: center;

   } 
   @media (min-width: 1025px) {
       width:33%;
   } 

}

Answer 2

创建style.js

export const CoreContainer = styled.div`
     display: flex;
     justify-content: center;
     flex-direction: column-reverse;
     @media (min-width: 1025px) {
      flex-direction: row;
    }
  height:100%;
`;

像这样导入两个文件：

import { CoreContainer } from 'path of the style.js';

如何在不同的 React 组件之间重用 styled-components？

How to reuse styled-components between different react components?

css

reactjs

styled-components