附加其他道具时在控制台上显示“未知道具”警告

我正在使用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斌，显示错误：https://www.webpackbin.com/bins/-KpKbVG-Ed0jysHeFVVY

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

来源

2017-07-19 emattiazzi

看起来，样式组件网站上提供的示例并非实际可用的示例。

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

来源

2017-12-06 21:50:16

附加其他道具时在控制台上显示“未知道具”警告

回答

相关问题