【React/CSS】初期値を設定する - 小さなことからこつこつと。

ReactのCSSの設定場所

ReactではCSSをsrc/App.cssに初期設定を置いています。（他に個別に設定したりする場合は別ファイルを用意すると思います。）

ここにCSSを追記すれば初期設定が変更できます。

body {
  background-color: #FAFAFA;
}

上記を追記するだけで、初期値が変更されます。この場合だと、これを適用したアプリの背景色は、特に指定しない限りすべてのページで#FAFAFAの色になります。

Reactstrapを採用している場合、少し書き換える必要があるので注意しましょう。

Reactstrap導入はこちらをご覧ください。

ReactstrapにはInputやButtonなど、さまざまなコンポーネントが用意されています。たとえばRowには以下のような初期値が設定されています。

{
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}

これはReact上では記述を見つけられなかったのですが、調べるとBootstrapCDNによりコンテンツの配布をされているようです。なので、サーバー上に初期設定があるということですね。

前述のとおり、サーバーに初期設定があるので書き換えることはできません。その代わり、オーバーライド、上書きをすることで初期設定を変更することができます。

Labelを例に見ていきましょう。

{
display: inline-block;
margin-bottom: .5rem;
}

このmargin-bottom: .5rem;をどのページでも初期値で0を指定したいと思います。またmargin-leftも新たに指定してみましょう。

ファイルを開いてlabelの設定を上書きします。

label {
  margin-bottom: 0;
  margin-left: 10px;
}

さて、ブラウザで確認してみましょう。

もしかしたら変更が利いていないかもしれません。それはスタイルを読み込む順番が影響しています。

import 'bootstrap/dist/css/bootstrap.min.css';

そもそも、上記をインポートしてReactstrapを導入しました。この記述箇所はきっとimportの最後に羅列しているかもしれませんが、import './index.css';よりも前に記述する必要があります。

bootstrapのあとにindex.cssを読み込ませることによって上書きが叶います。

記述の順序を変更すれば、ようやく初期設定が反映されてるでしょう。これにより他でLabelを使用しても上書きした設定が反映されます。

Reactstrapの初期設定を変更したいときは、BootstrapCDNの読み込む順番にも気を付けて確認してみるといいと思います。