Question

我正在使用Styled Components 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

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

Answer 1

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

由于attrs函数为您设置的属性创建属性，因此错误说明html <input>标记不支持属性margin和padding：MDN - HTML input attributes

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

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};
`;

附加额外道具时，控制台上出现“未知道具”警告

1 个答案: