附加其他道具时控制台上的“未知道具”警告答案

【问题标题】："Unknown props" warning on console when attaching additional props附加其他道具时控制台上的“未知道具”警告
【发布时间】：2017-12-25 00:30:25
【问题描述】：

我正在使用样式化组件 v2.1.1。文档说，为了避免不必要的包装，我们可以使用 .attrs 构造函数。见：https://www.styled-components.com/docs/basics#attaching-additional-props

我尝试使用它，但我总是在控制台中收到以下警告：

Warning: Unknown props `margin`, `padding` on <input> tag. Remove these props from the element. For details, see (removed )
 in input (created by styled.input)
in styled.input (created by InputContainer)
in div (created by InputContainer)
in InputContainer

我创建了一个 Webpack Bin 来显示错误：https://www.webpackbin.com/bins/-KpKbVG-Ed0jysHeFVVY

是我用错了还是有问题？

【问题讨论】：

标签： styled-components

【解决方案1】：

看起来，样式化组件网站上提供的示例并不是一个实际可用的示例。

由于attrs函数会为你设置的属性创建属性，所以说html<input>标签不支持属性margin和padding是正确的：MDN - HTML input attributes

您看到的错误在styled-components GitHub 上被标记为问题。实际的解决方案是不要直接使用 styled-components 文档中给出的示例。有关完整说明，请参阅问题报告。

Github 上的贡献者之一给出的代码示例是将示例修改如下：

const getSize = p => p.size || '1em'

const Input = styled.input.attrs({
    // we can define static props
    type: 'password'
})`
    color: palevioletred;
    font-size: 1em;
    border: 2px solid palevioletred;
    border-radius: 3px;

    /* here we use the dynamically computed props */
    margin: ${getSize};
    padding: ${getSize};
`;

【讨论】：