問題タブ [styled-components]

styled-components${props => props.myProp}への書き込みを避けるにはどうすればよいでしょうか?

たとえば、ボタンのスタイルを設定する場合:

こことここのドキュメントでは、次のように書く必要があり${props => props.myProp}ます。しかし、これは面倒で不必要に見えます。だけ書けばよかったのに${props.myProp}。

私の現在の回避策は、次のようなものを書くことです：

しかし、これは単に${props.color}.

では、これを行うにはどうすればよいでしょうか。

スタイル付きコンポーネントを使用し、次のようなタグ付きテンプレート リテラル構文を使用してコンポーネントを生成しています。

あるケースでは、ブレークポイントに基づいてメディア クエリを生成し、含まれる css のタグ付きテンプレート リテラルを渡す関数を呼び出す必要があります。

例えば：

メディア関数は次のようになります。

値とタグ付きテンプレート リテラルの両方を渡すことは可能ですか、それとも間違った方法で行っていますか?

material-uiのアルファ版でstyled-componentsを使用しようとしています

documentationによると、これはそのままで動作するはずです。

このコード:

次のようなものが生成されます。

よさそうです。

ただし、私が抱えている唯一の問題は、挿入された CSS スタイル( pic ) の順序です。styled-components からのスタイルは、MUI のスタイルの前に挿入されるため、優先度が低くなります。

を使用せずにこれを解決する方法はあります!importantか?

私は React.js を学ぼうとしてきましたが、反応、スタイル設定されたコンポーネント、および Bootstrap の間のスタイリングに問題があります。理想的な目標は、3 つの gif を連続して配置し、すべてのボタンを中央に配置し、その間にスペースを空けないことです。各gifに100vhが必要です。

以下には、知っておく必要があるすべての情報が含まれている必要があります。

反応ファイル:

webpack.config:

インデックスファイルは、実際にはthumbnail.jsという名前の「React」ファイルを呼び出します

index.js:

経験豊富な開発者にとって、これはおそらくひどいものに見えることは理解しています。私はまだWeb開発にかなり慣れていないので、どんな指針も歓迎されています