1

我正在使用样式化组件 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

我是否以错误的方式使用它还是有问题？

4

1 回答 1

0

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

由于 attrs 函数会为您设置的属性创建属性，因此错误地说 html<input>标签不支持属性边距和填充是正确的：MDN - HTML 输入属性

您看到的错误在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};
`;
于 2017-12-06T21:50:16.137 回答