web-dev-qa-db-ja.com

反応アプリでCSSモジュールを使用してグローバルスタイルを適用する方法は？

現在、スタイリングにReactでCSSモジュールを使用しています。だから私のコンポーネントのそれぞれは、そのようにそのコンポーネント固有のCSSファイルにインポートしています：

import React from 'react';
import styles from './App.css';

const example = () => (
  <div className={styles.content}>
    Hello World!
  </div>
);

export default example;

これは個々のコンポーネントをスタイリングするときにうまく機能しますが、コンポーネント固有ではないグローバルなスタイリング（html、body、headerタグ、divなど）を適用するにはどうすればよいですか？

cssreactjscss-modulesreact-css-modules
40
hidace

ES6インポート構文を使用しているため、同じ構文を使用してスタイルシートをインポートできます

import './App.css'

また、クラスを:globalでラップしてグローバルスコープに切り替えることができます（これは、CSSモジュールがそれを調整しないことを意味します。たとえば、ランダムIDを隣に追加します）

:global(.myclass) {
  background-color: red;
}
63
felixyadomi

これは、以下を追加するだけで実行できます。

require('./App.css');

（この質問に正しく答えてくれた@elmeisterに感謝します。）

6
hidace

グローバルにスタイルをインポートするために見つけた唯一の方法は、特定のルートに対してのみです：

<style dangerouslySetInnerHTML={{__html: `
  body { max-width: 100% }
`}} />

renderメソッドの戻り値内。

そうでない場合、styleタグが<head>に追加され、スタイルが次のすべてのルートに適用されます。

から https://medium.learnreact.com/the-style-tag-and-react-24d6dd3ca974

コードをより整理するために、スタイルをファイルから文字列としてインポートすることもできます。

1
Manolo