🦋
React で CSS のあて方(モジュール・styled-jsx・styled-components・Emotion)
css でスタイルを設定する方法はいくつか用意されておりライブラリも色々あります。
その中から良く使われている以下の5つの方法を紹介します。
- インラインで指定
- モジュールを使う方法
- styled-jsx (CSS in JS)
- styled-components (CSS in JS)
- Emotion
デフォルト(インライン)
Reactでデフォルトで提供されている方法。
キャメルケースで変数名を宣言しCSSをオブジェクトで書いてインラインで指定。
export const InlineStyle = () => {
const containerStyle = {
border: "solid 2px #329eff",
borderRadius: "20px",
padding: "8px",
margin: "8px",
display: "flex",
justifyContent: "space-around",
alignItems: "center"
};
const titleStyle = {
margin: 0,
color: "#3d84a8"
};
const buttonStyle = {
backgroudColr: "#abedd8",
border: "none",
padding: "8px",
borderRadius: "8px"
};
return (
<div style={containerStyle}>
<p style={titleStyle}> Inline Style </p>
<button style={buttonStyle}> Button </button>
</div>
);
};
モジュール
今回は対象のコンポーネントを CssModules.jsx
、モジュールファイルをCssModules.module.css
とする。node-css
を npm
でインストールしモジュールファイルを作成。
.container {
border: solid 2px #329eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
}
.title {
margin: 0;
color: #3d84a8;
}
.button {
background-color: #319fff;
border: none;
padding: 8px;
border-radius: 8px;
}
コンポーネント側で読み込んでクラスを指定。
import classes from "./CssModules.module.css";
export const CssModules = () => {
return (
<div className={classes.container}>
<p className={classes.title}> Css Modules </p>
<button className={classes.button}> Button </button>
</div>
);
};
styled-jsx (CSS in JS)
styled-jsx
をインストール。コンポーネントに <style jsx="true">
を使ってCSSを指定することができる。
export const StyledJsx = () => {
return (
<>
<div className="container">
<p className="title"> Styled Jsx </p>
<button className="button"> Button </button>
</div>
<style jsx="true">{`
.container {
border: solid 2px #329eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
}
.title {
margin: 0;
color: #3d84a8;
}
.button {
background-color: #319fff;
border: none;
padding: 8px;
border-radius: 8px;
}
`}</style>
</>
);
};
styled-components (CSS in JS)
styled-components
をインストール。styled.
を使ってタグごとにCSSを指定することができる。
import styled from "styled-components";
export const StyledComponents = () => {
return (
<Container>
<Title> Styled Components </Title>
<Button> Button </Button>
</Container>
);
};
const Container = styled.div`
border: solid 2px #329eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
`;
const Title = styled.p`
margin: 0;
color: #3d84a8;
`;
const Button = styled.button`
background-color: #319fff;
border: none;
padding: 8px;
border-radius: 8px;
`;
Emotion
@emotion/react
をインストール。インラインスタイルのようにしてCSSを指定する場合は以下のように書ける。
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";
export const Emotion = () => {
const containerStyle = css`
border: solid 2px #329eff;
border-radius: 20px;
padding: 8px;
margin: 8px;
display: flex;
justify-content: space-around;
align-items: center;
`;
const titleStyle = css({
margin: 0,
color: "#3d84a8"
});
return (
<div css={containerStyle}>
<p css={titleStyle}> Emotion </p>
</div>
);
};
styled-components
のような書き方だと以下のようになる。
import styled from "@emotion/styled";
export const Emotion = () => {
・・・
return (
<div css={containerStyle}>
<p css={titleStyle}> Emotion </p>
<Button> Button </Button>
</div>
);
};
const Button = styled.button`
background-color: #319fff;
border: none;
padding: 8px;
border-radius: 8px;
`;
まとめ
ReactでCSSを当てる以下の方法について書きました。
- インラインで指定
- モジュールを使う方法
- styled-jsx (CSS in JS)
- styled-components (CSS in JS)
- Emotion
複数の指定方法があるので初見だと難しく感じることもあるかもしれませんが区別して読み解けば簡単ですね。CSSを触る際の参考になれば幸いです。
Discussion