スタイリッシュなコンポーネントに小道具を渡す方法

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'関数を使うことができます。