스타일이 지정된 구성 요소에 소품을 전달하는 방법

Question

스타일이 지정된 구성 요소를 사용하려고하고 있는데 그 소품을 전달하려고합니다.

const CustomDiv = styled.div` 
    position: absolute; 
    top: 23px; 
    bottom: 0; 
    left: 0; 
    width: 100%; 

    ${props => props.heigth && css` 
    top: props.heigth; 
    `} 
`; 

eslint 관리자가 top: props.heigth가 일치하지 않는 속성 값이 있는지 말해 유지 : 이것은 내 코드입니다. 그럼 내가 뭘 놓치고 있니?

Answer 1

우선, 나는 당신이 소품 이름 heigth -> height의 철자가 잘못되었다고 생각합니다. 둘째, 솔루션 다음 시도해보십시오 height가 0 동일한 경우

const CustomDiv = styled.div` 
    position: absolute; 
    top: 23px; 
    bottom: 0; 
    left: 0; 
    width: 100%; 

    ${({ height }) => height && ` 
    top: ${height}px; 
    `} 
`; 

그러나, 렌더링되지 않습니다. lodash의 isNumber 함수 또는 typeof height === 'number' 함수를 사용할 수 있습니다.