CSSの設定

[sumakokima2]

CSSを読み込みたいなら、それらのモジュールインストールしたあと、webpackの設定を記述する必要がありますが、かなり複雑で、うちらも最近は使わなくなりました。

業界的にも最近ではこの複雑さを嫌って、styled-compnentsなどのCSS-in-JSと呼ばれるようなアプローチのライブラリを使うことが増えているため、うちらもそれを使っています。追加のローダーやプラグインが不要で、webpackの設定を一切いじらずにCSSを記述することができます。 （編集済み） CSSを読み込むのを頑張っても良いですが、ダーウィン的にはstyled-componentsやemotonの方が推奨です！

styled-componentsのインストール

https://www.styled-components.com/docs/basics

• 表示のためのモジュールなので[-dev]はつけない npm install --save @types/styled-components

モジュールのインポート文の追加

import styled from 'styled-components';

CSSの記述

cssを反映させたい.tsxファイルに直接書き込む。 通常のhtmlだと<div class="LISTMENU">...</div>と書くが、その箇所をコンポーネント化すればよい。

例）

const LISTMENU = styled.div`
  font-size: 1.0em;
  text-align: left;
  color: #ffffff;
  display: block;
  width:200px;
  background: #666666;
  position: absolute;
  top: 0px;
`;

  const Package = styled.div`
  display: block;
`;

const Package1 = styled.div`
display: block;
`;

<LISTMENU>
               <Package>
               <form id="imagelist1">
                    <ul>
                        {this.props.pins.map((d, i) => {
                        return (
                            <li>
                                <label>{d.name}</label>
                                <input type="checkbox" 
                                    id={d.id} 
                                    key={d.id} 

                                    checked={this.state.pinsshow[i]}
                                    onClick={this.clickAction} 
                                />
                                {d.name}
                            </li>
                        );
                        })}
                    </ul>
                    </form>
                </Package>
                <Package1>
                <form id="imagelist">
                    <ul>
                        {this.props.images.map((d, i) => {
                        return (
                            <li>
                                <label>{d.name}</label>
                                <input type="checkbox" 
                                    id={d.id} 
                                    key={d.id} 

                                    checked={this.state.imagesshow[i]}
                                    onClick={this.clickAction1} 
                                />
                                {d.name}
                            </li>
                        );
                        })}
                    </ul>
                </form>
                </Package1>
                </LISTMENU>

styled.＊＊＊　の種類

styled.section
styled.div
styled.button
styled.input.attrs
styled.h1

などがある。詳細はリファレンスを参照。