如何将道具传递给样式化的组件

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。其次，尝试以下解决方案：

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

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

但是，如果 height 等于 0，则不会呈现。您可以使用 lodash 中的 isNumber 函数或 typeof height === 'number'.

如何将道具传递给样式化的组件

how to pass props to styled components

javascript

reactjs

styled-components