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

我正在使用样式化的组件，并试图将道具传递给它们

这是我的代码：

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

的属性值不匹配。那么，我在这里遗漏了什么呢？

首先，我相信你把道具的名字

heigth->height

搞错了。其次，尝试以下解决方案：

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

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

---

但是，如果

高度

等于

0

，则不会渲染。你可以使用lodash的

isNumber

函数，也可以使用

typeof height==“number”

不是吗

height

？@Kinduser没关系，只是道具名称，对不起，我打错了。是的，你说得对，我拼错了道具名称。。。对不起；）它起作用了。