지금까지는...
컴포넌트를 만들어두고, 그것을 수입해와서 쓸 때 변경사항이 생기면 또 다른 컴포넌트를 만들었었다.
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
이거보고 똑같이 했는데 안된다.
https://stackoverflow.com/questions/62182083/styling-nested-components-using-styled-components
그래서 이 글을 찾았다. 처음엔 이해를 못해서 직접
className="gameCard"라고 적었다.
근데 이건 안되고! 변수로서 적어줘야한다.
props.className을 써준순간,,,~~~!!!! 적용이 됐다.
export const DetailGameCard = styled(GameCardSlider)`
${GameBox} {
}
${GameVideo} {
background-color: red;
width: 223px;
height: 150px;
}
`;
스타일 적용은 이렇게 해주면 된다.
'프론트엔드✏️ > 개인공부' 카테고리의 다른 글
카카오 로그인 🎃🎃🎃 (0) | 2022.12.05 |
---|---|
당신이 내년에 얻을 세 가지 - 랜덤 뽑기만들기 🎁 (1) | 2022.12.01 |
[react-youtube] 재생목록 있는데 그 안에서 랜덤 재생하게 하고 싶어. (0) | 2022.11.04 |
[css] Input Animation, Styled-Components로 바꿔서 사용하기, input selector (0) | 2022.10.28 |
[css] grid는 어려월... repeat(auto-fill, minmax(285px, 1fr)); (0) | 2022.10.24 |