Javascript 警告：样式化组件上的未知道具

我是样式化组件的新手，我有以下问题

假设我有以下组件：

const NavigationBar = Content.withComponent(Flex).extend`


display: flex;
  flex-direction: row;
  padding: 0 24px;

  height:  ${switchProp('size', {
    s: '40px',
    m: '50px',
    l: '70px',
  })};

  ${Text} {
    align-self: center;
    justify-self: center;
    color: ${prop('theme.colors.navigation-text', '#000')};
  }

  ${H1}, ${H2}, ${H3}, ${H4}, ${H5}, ${H6}{
    color: #1474A4;
    padding: 0 24px;
    align-self: center;
    color: ${prop('theme.colors.navigation-text', '#000')};
  }
`;
export default NavigationBar;

现在，当我在故事书或其他地方使用此组件时，我得到以下警告：

warning.js:33警告：标签上有未知道具

主要

，

导航

，

次要

。从元素中移除这些道具

---

我阅读了上的文档，但我真的无法修复或找到修复它的方法。你能给我一些建议吗？

升级你的React到v16版本会超过警告，但有些东西将这些道具作为（无效）DOM属性传递。升级你的React到v16版本会超过警告，但有些东西将这些道具作为（无效）DOM属性传递。