안녕하세요.

이번에는 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 의 문서 에 이런 것이,

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

Google 교사에게 번역을 요청하면,

기능
기본 동작을 재정의하고 원하는 위치에 스타일을 삽입할 수 있습니다.

이것을 다시 쓰면 스타일의 로드 순서를 변경할 수 있을 것 같다!

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 아래에 넣을 수 있도록 수정하고 싶습니다.