CODEWITHSUNDEEP
cssreactjsstyled-components
subharb
subharb

Reputation: 3472

How to reuse styled-components between different react components?

I use a similar layout between different components, I would like to be able to reuse the styled-components that create the layout.

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

I would like to be able to use coreContainer, firstContainer and SecondContainer, in different React Components, is there a way to reuse styled-components css between different components so if given the case that I change the layout it will change in both components and I don't have duplicated code?

Thanks.

Upvotes: 0

Views: 725

Answers (2)

SM Chinna
SM Chinna

Reputation: 341

Create 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 both file like this:

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

Upvotes: 3

54x1
54x1

Reputation: 93

i think you're look at something like this?

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

}

Upvotes: 0

Related Questions