GatsbyでMaterial Components for the web

起きたトラブル

• アイコンが表示されない
• CSSのカスタムプロパティの定義位置
• カスタムプロパティを無視したという警告が消せない

アイコンが表示されない

Helmetを使って読み込んだ。

gatsby-config.js

module.exports = {
  plugins: [
    'gatsby-plugin-react-helmet'
  ]
}

const () => {
  return 
    <Helmet>
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
    </Helmet>
}

CSSのカスタムプロパティの定義位置

カスタムプロパティをどこで定義するのがいいか悩んだ。

結局cssをimportする場所は一箇所限定して、cssないでMaterial Componentsのcssを読むようにした。

例

index.js

import 'index.css'

export default () => {
　　return <header className="mdc-toolbar">
      <div className="mdc-toolbar__row">
        <section className="mdc-toolbar__section mdc-toolbar__section--align-start">
          <a href="#" className="material-icons mdc-toolbar__icon--menu">menu</a>
          <span className="mdc-toolbar__title">{title}</span>
        </section>
      </div>
    </header>
}

index.css

@import "@material/theme/dist/mdc.theme.css";
@import "@material/toolbar/dist/mdc.toolbar.css";

:root {
    --mdc-theme-primary: #D84315;
    --mdc-theme-accent: #C62828;
}

調査メモ

webpackの設定は下記あたりをみるとわかる。

css-nextがはいっているのでカスタムプロパティは使える。
http://cssnext.io/features/#custom-properties-var

コンポーネントごとにCSSをimportさせる

各所のコンポーネントごとのファイルでCSSをよませるとその時点で変数が展開されて、後から挿入する手立てがなくなってしまうのでボツになった

gatsby-node.jsをつかってpostcss-custom-propertiesの設定をいろいろいじってみたけどどれも微妙だったのでやめました。

カスタムプロパティを無視したという警告が消せない

material components側のCSSをいじらないとどうにもならないと判断した。

以下のようなものがでてしまう。

作業の邪魔になる場合は以下で消去した。

html::before, html::after {
  display: none ;
}

メモ

react-material-components-webを使ったほうが早いかもしれない。

参考文献

• https://github.com/postcss/postcss-custom-properties