「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録2

スポンサーリンク
「モダンJavaScriptの基本から始めるReact実践の教科書」の感想・備忘録1の続き

CSS

ReactでのCSSの書き方

6種類くらい書き方がある。

  1. インライン
    style属性にオブジェクトで指定する
  2. CSS Modules
    xxx.modules.cssで定義
  3. Styled JSX
    styled-jsxライブラリを使う
  4. styled components
    styled-componentsライブラリを使う
  5. Emotion
    @emotion/reactと@emotion/styledライブラリを使う
  6. Tailwind CSS

CSS Modules

.title {
  color: red;
}
// SASSを使う場合はnpm install node-sass
import classes from './CssTest.module.css';

function CssTest() {
  return (
    <>
      <h1 class={classes.title}>CssModules</h1>
    </>
  );
}

export default CssTest;

Styled JSX

npm install styled-jsxでインストール

function CssTest() {
  return (
    <>
      <style jsx="true">{`
        h2 { color: blue }
      `}</style>
      <h2>Styled JSX</h2>
    </>
  );
}

export default CssTest;

styled components

npm install styled-componentsでインストール

import styled from 'styled-components';

function CssTest() {
  // コンポーネント名の先頭は大文字でなければならない
  const STitle = styled.h3`
    color: green;
  `;
  return (
    <>
      <STitle>styled components</STitle>
    </>
  );
}

export default CssTest;

Emotion

npm install @emotion/reactでインストール
※ styled components方式で記述する場合は@emotion/styledも必要。

  • /** @jsxImportSource @emotion/react */はJSX pragmaと呼ばれる記述であり、Emotionを使うために必要なものと思っていればよい
  • Emotionではインライン・Styled JSX・styled componentsと同じ書き方が用意されている
    ※css関数に渡す引数が、インライン方式ではオブジェクト、Styled JSX方式ではタグ付きテンプレートリテラルになるので注意
  • Styled JSX方式ではSCSSもそのまま使うことができる
  • ルールを決めずに運用してしまうと複数の記述方法が混在してしまう
/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";
import styled from "@emotion/styled";

function CssTest() {
  /*Emotion(インライン方式)*/
  const pStyle = css({
    color: 'pink',
  });

  /*Emotion(styled JSX方式)*/
  const pStyle2 = css`
    color: orange;
  `;
  
  /*Emotion(styled components方式)*/
  const SP = styled.p`
    color: purple;
  `;
  return (
    <>
      <p css={pStyle}>Emotion(インライン方式)</p>
      <p css={pStyle2}>Emotion(styled JSX方式))</p>
      <SP>Emotion(styled components方式)</SP>
    </>
  );
}

export default CssTest;

Tailwind CSS

導入手順

  1. npm install --save-dev tailwindcss
    Tailwind CSSのv2まではpostcssとautoprefixerも必要だったが、v3では不要になった
  2. npx tailwindcss init
  3. 生成されたtailwind.config.jsを修正
    content: [ "./src/**/*.{js,jsx,ts,tsx}", ],
  4. index.cssに追加
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
  5. npm start
function TailwindTest() {
  return (
    <>
      <div className="border border-gray-400 rounded-2xl p-2 m-2 flex justify-around items-center">
        <h1 className="bg-blue-500">TailwindTest</h1>
        <button className="bg-gray-300 border-0 p-3 rounded-md hover:bg-gray-400 hover:text-white">ボタン</button>
      </div>
    </>
  );
}

export default TailwindTest;

CDNを使う場合

public/index.htmlに<script src="https://cdn.tailwindcss.com"></script>を追加する。
特定のコンポーネント内だけで使う場合はuseEffectを使って読み込む。

useEffect(()=>{
  const head = document.querySelector('head');
  const script = document.createElement('script');
  script.src = 'https://cdn.tailwindcss.com';
  head.appendChild(script);
}, []);

コメント