styled component props 패싱 ,상속

부모로 부터 받아온 데이터를 가지고 동적 스타일링

HomPage.js

const HomePage =()=>{
 const [user, setUser] = useState([]);
 
 useEffect(()=>{
 	  setUser({ id: 1, userName: "ssar" });
        
    }, []);
    
     return (
        <div>
            <Header />
            <Home user={user}/>
            <Footer/>
        </div>
        )
       };

Home.js

//부모로 부터 넘어온 값 userName의 값에 따라 버튼색이 달라짐
const StyledDeleteButton = styled.button`
        color:${(props) => (props.user.userName === 'ssar' ? 'blue' : 'red')};
    `;
    
    const Home = (props) => {
    
    const{ user }=props;
    
    return (
    	<div>
        	  <StyledDeleteButton user={user} onClick={()=>setBoards([])}>전체삭제</StyledDeleteButton>
        </div>
        )
       };

설명 참조

스타일 상속

잘만들어 놓은 스타일을 상속 받을때

const StyledDeleteButton = styled.button`
       color:${(props) => (props.user.userName === 'ssar' ? 'blue' : 'red')};
   `;

//위 버트 디자인을 상속 받고 추가 적으로 디자인
//style(상속받을 디자인 명)
const StyledAddButton = styled(StyledDeleteButton)`
     background-color: green;
   `;