jsxのプレースホルダーでエラーが発生しました

Question

私は単純な反応のHTML入力コンポーネントを持っていて、別のセクションやページで使用されていたので、スタイリング用の小道具とそのプレースホルダーを追加しました。問題は、コンパイル時にエラーが発生することがあることです（私たちはnextjsを使用しています）。 このコード：

{placeHolderColor && (<style jsx>{`input::placeholder{color:${placeHolderColor}}`}</style>)} 

は基本的に、私はinline If with Logical && Operatorを使用してい内部は小道具placeHolderColorが存在するかどうかをチェックするために機能をレンダリング、およびスタイルタグを追加します（存在する場合）。

私は取得していますエラー：

Warning: Unknown prop jsx on tag. Remove this prop from the element.

あなたはページをリロードするときにエラーが発生します。変更を加えてホットコードの再ロードを実行すると、エラーは発生しません。問題がリテラル内のvar、 ':: placeholder'擬似要素またはwhatであるかどうかは不明です。とにかくコードが動作し、placeHolderColor varが定義されている場合はスタイルが適用されます。

Answer 1

あなたのコードをテストしたところ、同じエラーが発生しました（ページの読み込み時も同じです）。その後、私は、ZEITの#nextスラックチャンネルhttps://zeit.chat/のニックネーム@g（github @giuseppeg）のスタイル付きjsx開発者と話し、<style jsx>タグの条件付き使用がサポートされていないことを確認しました。彼の説明はhttps://github.com/zeit/styled-jsx/issues/233です。

<style jsx>{'input::placeholder{color:${placeHolderColor}}'}</style>

私はこのエラーを持っている：

Module build failed: SyntaxError: Expected placeHolderColor to not come from the closest scope. Styled JSX encourages the use of constants instead of props or dynamic values which are better set via inline styles or className toggling. See https://github.com/zeit/styled-jsx#dynamic-styles .

https://github.com/zeit/styled-jsx#dynamic-stylesからの勧告によると、あなたは基本的にはいけない条件削除し、ちょうどこのようなあなたのタグを挿入した後も

、 <style jsx>タグ内のテンプレートリテラルに動的値を追加します（ただし、定数と定数式はバージョン1.0.4から追加できます（下のUPDATEを参照してください）。詳細はe回答）。スラックスレッドhttps://zeit-community.slack.com/archives/C2U01UYEA/p1496928897076534の@giuseppegコメントによると、「styled-jsxはスタティックコードをコンパイルして生成するので、最終的なCSSをユニークにするハッシュは、 colorのような変数の値が変更されたときに変更する

ドキュメントから分かるように、インラインスタイルまたはclassNameトグルで動的値を使用することをお勧めします。残念ながら、リアクトにインラインスタイルを介して可能ではないで擬似要素（プレースホルダなど）をスタイリングするので、あなたが可能な色の有限数を持っている場合、各色のケースのためのクラスを作成し、このようにそれを使用します。

const InputWithColouredPlaceholder = props => (
    <div> 
    <input 
     placeholder="text" 
     className={ 
     'placeholderColourClass' in props && props.placeholderColourClass 
     } 
    /> 
    <style jsx>{` 
     .reddy::placeholder { 
     color: red; 
     } 
     .greeny::placeholder { 
     color: green; 
     } 
    `}</style> 
    </div> 
); 

<InputWithColouredPlaceholder placeholderColourClass="reddy" />

考えられる色の範囲が広い場合は、もっと複雑になります。この場合は、ZEITのスラックhttps://zeit.chat/の#nextチャンネルで提案を求めることをお勧めします。スタイルを作ら-JSX 1.0.4で動作します（ただし、nextjsは現在1.0.3に依存し、スタイル・JSXの個別のインストールが助けにはなりませんので、アップデートを待つべき定数とテンプレートリテラル内の定数式を使用して

UPDATE スタイルjsx 1.0.4をサポートするnextjsの）これは、小道具を通らず、コンポーネント内部で作成されていない定数があれば動作するはずです（例えば、色の定数を持つjsファイルを入力コンポーネントにインポートするなど）。しかし、動的な方法が必要なので、あなたのケースに合っていません。

Answer 2

エラーが発生しましたWarning: Unknown prop 'jsx' on <style> tag. Remove this prop from the element. For details, see FB react-unknown-prop.スタイルタグのjsxプロパティは何を意味していますか？ただそれを削除する？