タグ付けされた質問 「jss」

css-in-jsメソッドを使用してreactコンポーネントにクラスを追加するには、複数のコンポーネントを追加するにはどうすればよいですか？ クラス変数は次のとおりです。 const styles = theme => ({ container: { display: 'flex', flexWrap: 'wrap' }, spacious: { padding: 10 }, }); これが私がそれをどのように使用したかです： return ( <div className={ this.props.classes.container }> 上記は機能しますが、classNamesnpmパッケージを使用せずに両方のクラスを追加する方法はありますか？何かのようなもの： <div className={ this.props.classes.container + this.props.classes.spacious}>

95 css  reactjs  material-design  material-ui  jss 

Material UIとそのテーマプロバイダー（JSSを使用）を使用しているアプリケーションがあります。 私は今、完全に本格的なReactライブラリーではないfullcalendar-reactを組み込んでいます。これは、元のフルカレンダーコードの薄いReactコンポーネントラッパーにすぎません。 つまり、要素のスタイルを制御するレンダープロップなどにアクセスすることはできません。 ただし、レンダリング時に呼び出されるコールバック（例：eventRenderメソッド）を介して、DOM要素に直接アクセスできます。 これが基本的なデモサンドボックスです。 次に、フルカレンダーコンポーネント（ボタンなど）を他のアプリケーションと同じルックアンドフィールにしたいと思います。 これを行う1つの方法は、使用しているクラス名を確認し、それに応じてスタイルを実装することにより、すべてのスタイルを手動でオーバーライドできることです。 または、ドキュメントで提案されているように、Bootstrapテーマを実装することもできます。 しかし、これらのソリューションのいずれかの問題は、次のとおりです。 大変な作業になるでしょう MUIテーマに変更を加えて、カレンダーのテーマを更新するのを忘れた場合、それらが異なるように見えるため、同期の問題が発生します。 私がしたいのは次のいずれかです： MUIテーマを魔法のようにBootstrapテーマに変換します。 または、次のようなMUIクラス名とカレンダークラス名の間のマッピングを作成します。 .fc-button = .MuiButtonBase-root.MuiButton-root.MuiButton-contained .fc-button-primary= .MuiButton-containedPrimary セレクターなどをマッサージして機能させる必要はありません（たとえば、MUIボタンには2つの内部スパンがありますが、フルカレンダーには1つしかない）。ほとんどの場合、テーマを変更します。2か所で変更する必要はありません。 @extend構文でSassのようなものを使用することは、私が考えていることです。Sassを使用してフルカレンダーCSSを簡単に作成できましたが、SassはどのようにしてMuiThemeにアクセスできますか？ おそらく私は反対のアプローチを取ることができます-MUIに「ここのこれらのクラス名はこれらのMUIクラスのようにスタイル設定する必要があります」と伝えます。 これをどのように解決するかについて具体的な提案はありますか？

9 css  reactjs  fullcalendar  jss 

@keyframeを使用してCSSでアニメーションを使用する方法を学びました。しかし、私のカスタムアニメーションコードを自分のreactプロジェクト（materialUIを使用）に書きたいと思います。私の課題は、MaterialUIのmakeStyle（）を使用して、アニメーションをカスタム化するJavaScriptコードをどのように書くことができるかです。今回は、MaterialUIで遷移プロセスをパーセンテージでカスタマイズできるようにしたいと思います。makeStyle（）でこのようなコードを記述できるようにする必要がありますが、その方法がわかりません。 @keyframes myEffect { 0%{ opacity:0; transform: translateY(-200%); } 100% { opacity:1; transform: translateY(0); } } コードスニペットを実行する結果を非表示スニペットを展開

8 css  reactjs  material-ui  jss