追加の小道具を取り付けるときにコンソールで "Unknown props"警告が表示される

Question

Styled Components v2.1.1を使用しています。 ドキュメントには、不要なラッパーを避けるために、.attrsコンストラクタを使用できると記載されています。参照：https://www.webpackbin.com/bins/-KpKbVG-Ed0jysHeFVVY

アム：私は、エラーを表示するようにWebPACKのビンを作成しました

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 

：私はそれを使用しようとしたがましhttps://www.styled-components.com/docs/basics#attaching-additional-props

私は常にコンソールに次の警告を受けます私はそれを間違った方法で使用していますか、それとも問題がありますか？

Answer 1

スタイルパーツのWebサイトで提供されている例は実際の使用例ではありません。

ATTRS機能を使用すると、設定したプロパティの属性を作成するので、エラーは、HTML <input>タグ属性マージンとパディングをサポートしていないと言うで正しいです：あなたが見ている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}; 
`;