CSS
ReactでのCSSの書き方
6種類くらい書き方がある。
- インライン
style属性にオブジェクトで指定する - CSS Modules
xxx.modules.cssで定義 - Styled JSX
styled-jsxライブラリを使う - styled components
styled-componentsライブラリを使う - Emotion
@emotion/reactと@emotion/styledライブラリを使う - Tailwind CSS
CSS Modules
.title {
color: red;
}
// SASSを使う場合はnpm install node-sassimport 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
導入手順
- npm install --save-dev tailwindcss
Tailwind CSSのv2まではpostcssとautoprefixerも必要だったが、v3では不要になった - npx tailwindcss init
- 生成されたtailwind.config.jsを修正
content: [ "./src/**/*.{js,jsx,ts,tsx}", ], - index.cssに追加
@tailwind base;@tailwind components;@tailwind utilities; - 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);
}, []);