Zenn
🔖

React sytleの当て方まとめ

に公開
CSS
React
tech

React の style の当て方まとめ

いろいろあってやり方悩むので、自分なりにオススメ順に並べてみます
Css で書けるということは移行しやすかったりドキュメント多かったりで評価高いです

1.Styled Component
2.Emotion
3.Css Modele
4.styled Jsx
5.Inline Style

1.Styled Component

styled-components のインストールが必要
コンポーネント単位でスタイルを当てられるのでわかりやすく、CSS がそのまま使える

StyledComponents.jsx
import styled from "styled-components";

export const StyledComponents = () => {
  return (
    <SContainer>
      <STitle>- Styled Components -</STitle>
      <SButton>FIGHT</SButton>
    </SContainer>
  );
};
// 頭文字にSをつけるとわかりやすい
const SContainer = styled.div`
  border: solid 2px #392eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
  display: Flex;
  justify-content: space-around;
  align-items: center;
`;

const STitle = styled.p`
  margin: 0;
  color: #3d84a8;
`;

// hoverなどのCSS使える
const SButton = styled.button`
  background-color: #abedd8;
  border: none;
  padding: 8px;
  border-radius: 8px;
  &:hover {
    background-color: #46cdcf;
    color: #fff;
    cursor: pointer;
  }
`;

2.Emotion

設定が多い。
いろいろなスタイルの当て方が出来る。
反面、選択肢が多いのは良し悪しあると思う。

Emotion.jsx
/** @jsxRuntime classic */
/** @jsx jsx */
import { jsx, css } from "@emotion/react";
import styled from "@emotion/styled";

export const Emotion = () => {
  const containerStyle = css`
    border: solid 2px #392eff;
    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}>- Emotoion -</p>
      <SButton>FIGHT</SButton>
    </div>
  );
};

const SButton = styled.button`
  background-color: #abedd8;
  border: none;
  padding: 8px;
  border-radius: 8px;
  &:hover {
    background-color: #46cdcf;
    color: #fff;
    cursor: pointer;
  }
`;

3.CssModule

1 つのファイルで全て扱うので管理しやすいという考え方
ただ React コンポーネント単位で作成したいので、既存のアプリに React で開発などの場面で活躍か

また、名前空間を使用することで、例えば container という同じ CSS があっても、
Style.container と Classes.container でわけて考えることができる

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

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p className={classes.title}>- CSS Style -</p>
      <button className={classes.button}>FIGHT</button>
    </div>
  );
};
CssModules.module.scss
.container {
  border: solid 2px #392eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
  display: Flex;
  justify-content: space-around;
  align-items: center;
}

.title {
  margin: 0;
  color: #3d84a8;
}
.button {
  background-color: #abedd8;
  border: none;
  padding: 8px;
  border-radius: 8px;
  &:hover {
    background-color: #46cdcf;
    color: #fff;
    cursor: pointer;
  }
};

4.styled Jsx

そのまま CSS を使える
しかし、hover などは効かない

StyledJsx.jsx
export const StyledJsx = () => {
  return (
    <>
      <div className="container">
        <p className="title">- Styled Jsx -</p>
        <button className="button">FIGHT</button>
      </div>
      <style jsx="true">{`
        .container {
          border: solid 2px #392eff;
          border-radius: 20px;
          padding: 8px;
          margin: 8px;
          display: Flex;
          justify-content: space-around;
          align-items: center;
        }
        .title {
          margin: 0;
          color: #3d84a8;
        }
        .button {
          background-color: #abedd8;
          border: none;
          padding: 8px;
          border-radius: 8px;
          &:hover {
            background-color: #46cdcf;
            color: #fff;
            cursor: pointer;
          }
        }
      `}</style>
    </>
  );
};

5.Inline Style

CSS は使えず border-radius=>borderRadius など変換が必要
hover なども効かない
テスト用には簡単でいい

InlineStyle.jsx
export const InlineStyle = () => {
  const containerStyle = {
    border: "solid 2px #392eff",
    borderRadius: "20px",
    padding: "8px",
    margin: "8px",
    display: "Flex",
    justifyContent: "space-around",
    alignItems: "center"
  };
  const titleStyle = {
    margin: 0,
    color: "#3d84a8"
  };
  const buttonStyle = {
    backgroundColor: "#abedd8",
    border: "none",
    padding: "8px",
    borderRadius: "8px"
  };

  return (
    <div style={containerStyle}>
      <p style={titleStyle}>- InlineStyle -</p>
      <button style={buttonStyle}>FIGHT</button>
    </div>
  );
};

まとめ

個人的には Styled Component もしくは Emotion で開発するかなと。
CSS が使えるというのは大きい。

CSS フレームワークというものがあるので、そちらを使うとより簡単にかっこよくできます。
自分はセンスがあまりないので、フレームワークがありがたい。
おすすめは chakra ui。
https://chakra-ui.com/docs/components

GitHubで編集を提案

Discussion