こんばんは。

今回は、React + Material-UIで、CSS Modulesを使っていた際に、自分で書いたCSSが反映されなかったときのことと、一時的な対処方法についてです。

調べても全く情報が出てこなかったため、記事にしました。

間違っている点や、よりよい方法があれば教えて下さい！

CSSが反映されていないときの状態

Material-UIでつくったボタンに、オリジナルのスタイルを効かせようとして、

SignupButton.tsx

import * as React from 'react'
import Button from '@material-ui/core/Button'
import styles from './SignupButton.module.css'

const SignupButton: React.FC = () => {
  return (
    <Button className={styles.signup}>新規登録</Button>
  )
}

export default SignupButton

SignupButton.module.css

.signup {
  background-color: #aed581;
}

.signup:hover {
  background-color: #8bc34a;
}

あと、TypeScriptだからCSSの型情報も書いて、

SignupButton.module.css.d.ts

declare const styles: {
  readonly "signup": string;
};
export = styles;

さあ、ブラウザで確認！

ぴえん

CSSが反映されていません。

これが、起こった内容です。

原因の追求と解決

いろいろ探しているとスタイルの読み込み順番が問題であることが判明。

ネットで同じ問題を抱えていた人がいないか探してみるも、何も出てこず。

なんとなく、Webpackでバンドルしたときが原因であることがわかっていたので、

調べてみると、style-loaderのドキュメントにこんなものが、

Function
Allows to override default behavior and insert styles at any position.

Google先生に翻訳をお願いすると、

Function
デフォルトの動作をオーバーライドし、任意の位置にスタイルを挿入できます。

これを書き換えれば、スタイルの読み込み順番を変更できそう！

Webpackの設定ファイルを開いて書き換えてみた、

webpack.config.js

...
      {
        test: /.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: function insertAtBottom(element) {
                var parent = document.querySelector('body');
                parent.insertBefore(element, parent.firstChild);
              }
            }
          },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
...

これで、bodyの一番上にオリジナルのスタイルが挿入される！

ブラウザで確認してみると、

かちー

なんとかスタイルを効かせることができた...

おわりに

本当は、オリジナルのスタイルをheadの一番下に入れたかったが、うまくできませんでした。

今後、WebpackとMaterial-UIを詳しく調査して、オリジナルのスタイルをheadの下に入れれるように修正したいと考えてます。

WebpackでCSSの読み込み順番を変えたくてつまづいた件と一時的な解決方法について

CSSが反映されていないときの状態

原因の追求と解決

おわりに