Question

styled-components 错误“无法读取未定义的属性”正在传递的 prop

2020-09-17

1792

javascript reactjs styled-components

我将 defaultColors 对象传递给 styled-components 按钮元素，但无论我做什么，似乎都无法让它看到这个对象。

const ButtonPrimary = styled(Button)`
  background-color: ${({ defaultColors }) => defaultColors.primary ?? "blue"};
  color: ${({ defaultColors }) => defaultColors?.secondary ?? "orange"};
  width: 5rem;
  height: 3rem;
`;

它既看不到 defaultColors.primary ，也看不到 defaultColors.secondary ，因为好像没有传递 defaultColors。

如果我在另一个组件中将 defaultColors 传递给 ButtonPrimary ，那么它会看到它..但我显然不想每次使用此按钮时都传递该对象。

我做错了什么？

Answer 1

在 styled-components 中，您可以使用 WhatEver.defaultProps ，例如：

Button.defaultProps = {
  defaultColors: {
    primary: "black",
    secondary: "white"
  }
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

更新的 demo