Css 如何在不同的组件之间重用样式化的组件？

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

   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>);
 }
}

const CoreContainer=styled.div`
显示器：flex；
内容：中心；
弯曲方向：柱反向；
@介质（最小宽度：1025px）{
弯曲方向：行；
}
身高：100%；
`;
const FirstContainer=styled.div`
文本对齐：居中；
背景色：#F8FA；
宽度：100%；
垫顶：4rem；
对齐项目：居中；
证明内容：中心；
显示器：flex；
@介质（最小宽度：1025px）{
xmin宽度：700px；
宽度：68%；
}
`;
const SecondContainer=styled.div`
显示器：flex；
宽度：100%；
@介质（最小宽度：720px）{
-网络工具包盒阴影：-1px 0 10px 0px rgba（0,0,0,0.1）；
盒影：-1px 0 10px 0 px rgba（0,0,0,0.1）；
框大小：边框框；
显示器：flex；
证明内容：中心；
} 
@介质（最小宽度：1025px）{
宽度：33%；
} 
`;
导出类GeneralComponent扩展组件{
render（）{
if（此.props.value）{
返回
}
否则{
返回
}
}
}
//在不同的文件中
导出类组件扩展组件{
render（）{
返回(
{someContentA}
{其他内容a}
);
}
}
//在不同的文件中
导出类组件B扩展组件{
render（）{
返回(
{someContentB}
{otherContentB}
);
}
}

我希望能够在不同的React组件中使用coreContainer、firstContainer和SecondContainer，是否有办法在不同组件之间重用样式化组件css，以便在我更改布局的情况下，它将在两个组件中都更改，并且我没有重复的代码

---

谢谢。

我想你是在看这样的东西吧

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%;
   } 

}

---

我想你是在看这样的东西

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%;
   } 

}

创建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';

创建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';

---

假设您的容器是div类（如果不是），则使用#假设您的容器是div类（如果不是），则使用#也不要忘记将“样式化组件”添加到style.js文件中也不要忘记将“样式化组件”添加到style.js文件中