[React] ReactのCSSの当て方

ReactのCSSの当て方の種類について勉強した時のメモです。

今回当てているCSSは全て以下のスタイルで統一しています。

InlineStyle

export const InlineStyle = () => {

  const contaierStyle = {
    border: "solid 2px #329eff",
    borderRadius: "20px"
    padding: "8px",
    margin: "8px"
  }

  return (
    <div style={contaierStyle}>
      <p>スタイル</p>
    </div>
  )
}

• コンポーネント内にスタイルを記述していくReactがデフォルトで提供している方法。
• CSSプロパティはキャメルケース文字列のように "" で囲い , で区切る。

CSSModules

import classes from "./CssModules.module.scss";

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p>スタイル</p>
    </div>
  );
};

.container {
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
}

• CSSを別ファイルに切り出してimportする方法。
• 切り出すCSSファイル名にはmoduleをつける。
• CSSの書き方は普通のCSSの書き方と同じ。
• node-scssをインストールすることで使用可能。

Styled JSX

export const StyledJsx = () => {
  return (
    <>
      <div className="container">
        <p>スタイル</p>
      </div>

      <style jsx="true">
        {`
          .container {
            border: solid 2px #329eff;
            border-radius: 20px;
            padding: 8px;
            margin: 8px;
          }
        `}
      </style>
    </>
  );
};

• JSXの中でスタイルを書いていく方法。
• デフォルトだとhoverなどの疑似要素は使用できない。
• Next.jsに標準搭載されている。
• styled-jsxをインストールすることで使用可能。

Styled-Components

import styled from "styled-components";

export const StyledComponents = () => {
  return (
    <Container>
      <p>スタイル</p>
    </Container>
  );
};

const Container = styled.div`
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
`;

• スタイルで当てたコンポーネントを当てていく方法。
• コンポーネントファイルでstyled-componentsをimportする必要がある。
• styled-componentsをインストールすることで使用可能。

書き方の工夫

import styled from "styled-components";

export const StyledComponents = () => {
  return (
    <SContainer>
      <STitle>スタイル</STitle>
    </SContainer>
  );
};

const SContainer = styled.div`
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
`;

const STitle = styled.p`
  color: red;
`;

コンポーネント名の頭文字をSにすることでぱっと見でスタイルを当てているコンポーネントだと分かるのでこの書き方はおすすめ。

Emotion

• Emotionは色々な書き方がある方法。
• 1行目に/** @jsx jsx */と書く必要がある。
• @emotion/reactと@emotion/styledをインストールする必要がある。

CSSと同じ書き方ができる方法

/** @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;
  `;

  return (
    <div css={containerStyle}>
      <p>スタイル</p>
    </div>
  );
};

inline styleと似た書き方

/** @jsx jsx */
import { jsx, css } from "@emotion/react";

export const Emotion = () => {

  const containerStyle = css({
    border: "solid 2px #329eff",
    borderRadius: "20px",
    padding: "8px",
    margin: "8px"
  });

  return (
    <div css={containerStyle}>
      <p>スタイル</p>
    </div>
  );
};

styled-componentと似たような書き方

/** @jsx jsx */
import { jsx, css } from "@emotion/react";
import styled from "@emotion/styled";

export const Emotion = () => {
  return (
    <SContainer>
      <p>スタイル</p>
    </SContainer>
  );
};

const SContainer = styled.button`
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
`;

参考