Wie Requisiten zu gestylten Komponenten übergeben werden

Question

Ich versuche gestylte Komponenten und ich versuche Requisiten an sie zu übergeben. Dies ist mein Code:

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

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

Der eslint Inspektor hält mir zu sagen, dass top: props.heigth einen unpassenden Eigenschaftswert hat. Also, was fehlt mir hier?

Answer 1

Zunächst einmal glaube ich, dass Sie den Requisitennamen heigth -> height falsch geschrieben haben. Zweitens versuchen Lösung folgende:

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

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

Wenn jedoch die height gleich 0 ist, wird es nicht gemacht werden. Sie können entweder isNumber Funktion von lodash oder typeof height === 'number' verwenden.