[Styled-Components, Emotion] 컴포넌트 가져와서 일부만 수정하기(상속)

 

 지금까지는...

컴포넌트를 만들어두고, 그것을 수입해와서 쓸 때 변경사항이 생기면 또 다른 컴포넌트를 만들었었다.

 

A 컴포넌트의 이미지에 border가 있다면, border없애고 쓰고 싶으면 B 컴포넌트에 A내용을 복사해서 붙여넣은 뒤 border 부분만 수정하는 식으로...

 

이 부분이 정말 불편하고 힘들었는데... 왜 생각을 못했지? 

Styles.ts 에서 다른 라이브러리는 잘 불러와놓고 정작 내가 만든 컴포넌트는 불러올 생각을 못 했다. 

 

tsx파일에서  게임 슬라이더를 바로 수입하지 않고 스타일 파일에서 수입 후 가져온다.

 

<S.OtherGamesContainer>
        <GameSlider
          card={gameCard}
          count={3}
          datas={detailData?.anotherlist}
        />
      </S.OtherGamesContainer>

export const DetailGameSlider = styled(GameSlider)``;

<S.OtherGamesContainer>
        <S.DetailGameSlider
          card={gameCard}
          count={3}
          datas={detailData?.anotherlist}
        />
      </S.OtherGamesContainer>

 

 

dj...근데 이대로 해보려니까 막혔다.

어떤 방법을 동원해도 변하지않았다!!!!!!!!!!! 

 

왜냐면 GameCard가 아닌 GameSlider를 상속받아서였다... 

 

 

 

어.. 근데 그래도 안된다.

 

https://stackoverflow.com/questions/59738188/styling-nested-components-in-styled-components

Styling Nested Components in Styled-Components

 

이거보고 똑같이 했는데 안된다.

 

 

https://stackoverflow.com/questions/62182083/styling-nested-components-using-styled-components

Styling nested components using styled components

그래서 이 글을 찾았다. 처음엔 이해를 못해서 직접

 

className="gameCard"라고 적었다. 

근데 이건 안되고! 변수로서 적어줘야한다.

 

 

props.className을 써준순간,,,~~~!!!! 적용이 됐다. 

 

export const DetailGameCard = styled(GameCardSlider)`
  ${GameBox} {
  }

  ${GameVideo} {
    background-color: red;
    width: 223px;
    height: 150px;
  }
`;

스타일 적용은 이렇게 해주면 된다.