리액트 styled-components 질문 ㅠㅠ

Question

Button.tsximport React from "react"; @ts-ignore export default function Button({ text }) { return ; }Pet.tsximport React from 'react'; import styled from 'styled-components'; import Button from '@/components/atoms/Button'; import ranking from '@/assets/images/ranking.svg' export default function Pet() { return (

); } const RankingButton = styled(Button)` background-image: url(${ranking}); background-repeat: no-repeat; background-size: cover; background-color: blue; width: 70px; height: 70px; `별다른 스타일링이 정해지지않은 기본 Button 컴포넌트를 Pet.ts 파일에서 가져와서 styled-components로 가져온 Button 컴포넌트의 스타일을 정의해주려고 저렇게 했는데 에러는 안나는데 스타일이 적용이 안되네요..styled-components로 스타일 적용하면 개발자도구상에서 class="sc-어쩌구 저쩌구" 이렇게 어떤 클래스가 하나 추가되잖아요?이런 추가된 클래스가 없이 그냥 깡통 button 태그만 그대로 나오더라구요. 그래서 이거보니까 스타일이 아예 적용이 안되는거같은데.. 왜 안될까요?일단 Button.tsx 를import React from "react"; @ts-ignore export default function Button({ ...props }) { return ; }로 바꾸고 Pet.tsx 에서 그냥 이렇게 props 안넘겨주고 부르니까 되더라구요.이렇게 해결은 됐는데 왜 이렇게 해야 되는지 모르겠습니다...ㅋㅋㅋㅋButton 컴포넌트에서 ...props로 받으면 뭐가 어떻게 돼서 styled component가 적용이 되는건지.. 이유를 모르겠네요..ㅠ

Chobby · Answer

원래 코드에서는 Button 컴포넌트가 text prop만 받고 있었습니다. 그래서 styled-components를 적용하려고 하면 새로운 스타일이 적용되지 않았습니다. styled-components에서 생성된 추가 속성들이 Button 컴포넌트로 전달되지 않기 때문입니다....props를 사용하여 Button 컴포넌트를 수정한 후, 모든 전달받은 속성들을 button 요소에 그대로 전달하도록한 코드는 잘 작성되었습니다. 이렇게 되면 styled-components가 생성한 속성들이 모두 button 요소로 전달되어 정상적으로 스타일이 적용됩니다.원래 코드의 문제는 Button 컴포넌트가 받은 모든 속성을 전달하지 않았기 때문에 styled-components의 기대했던 스타일 변화가 발생하지 않는 것입니다.

리액트 styled-components 질문 ㅠㅠ

1개의 답변

#styled-components 목록