[解決済み] CSS モジュールを使って複数のスタイル名を定義する方法
2022-12-08 16:38:06
質問
CSSモジュールを使って、ある要素に複数のクラスを使用しようとしています。どのようにこれを行うのですか?
function Footer( props) {
const { route } = props;
return (
<div className={styles.footer}>
<div className={styles.description, styles.yellow}>
<p>this site was created by me</p>
</div>
<div className={styles.description}>
<p>copyright nz</p>
</div>
</div>
);
}
どのように解決するのですか?
以下のように、cssモジュールを使って複数のクラスを追加することができます。
className={`${styles.description} ${styles.yellow}`}
など
function Footer( props) {
return (
<div className={styles.footer}>
<div className={`${styles.description} ${styles.yellow}`}>
<p>this site was created by me</p>
</div>
</div>
);
}
使用方法 react-css-modules を使えば、通常のクラス名構文を使うことができます。
<div styleName='description yellow'>
と指定し
allowMultiple: true
を複数のクラスに対して指定します。
関連
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] JSONPとは何か、なぜ作られたのか?
-
[解決済み] forEachループでasync/awaitを使用する
-
[解決済み] セレクトボックスのプレースホルダーを作成するにはどうすればよいですか?
-
[解決済み] How do I style a <select> dropdown with only CSS?
-
[解決済み] どのDOM要素にフォーカスがあるかを調べるには?
-
[解決済み] inline/inline-block要素間のスペースを削除するにはどうすればよいですか?
-
[解決済み] モバイルブラウザの検出
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] javascriptでオプションのパラメータを扱う
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] コールバック地獄とは何か、RXはそれをどのように、そしてなぜ解決するのか?
-
[解決済み] Promise : then vs then + catch [重複].
-
[解決済み] jQueryを使用して、すべてのクリックイベントハンドラを削除するにはどうすればよいですか?
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法
-
[解決済み] querySelectorAllがない場合、ライブラリを使用せずに属性で要素を取得する?
-
[解決済み] これは純関数ですか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?