【React】様々なCSSのあて方に触れる

Inline Styles
CSS Modules
Styled JSX
styled components
Emotion

Inline Styles

export const InlineStyle = () => {
  const containerStyle = {
//CSSのプロパティ名はキャメルケースで記述する
//適用していく値は文字列で囲う
    border: "solid 2px #392eff",
    borderRadius: "20px",
    padding: "8px",
    magin: "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}>- Inline Styles -</p>
      <button style={buttonStyle}>FYGHT!</button>
    </div>
  );
};

CSS Modules

CSS Modulesはコンポーネントに対応する形でCSSファイルを用意して、それをコンポーネントで読み込んで使っていく形です。

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

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p className={classes.title}>- Css Modules -</p>
      <button className={classes.button}>FIGHT!</button>
    </div>
  );
};


.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;
}

CssModules.jsxにSCSSファイルをインポートして変数に割り当てて、スタイルをあてたい部分にその変数とSCSSファイルの中のクラス名をあてていきます。

CSS Modulesでスタイルをあてる時にCSSファイルには命名規則があります。

任意の名前.modules.css

任意の部分でつけられるところは読み込ませたいコンポーネントのファイルと合わせるのがベターです。

今回はSCSSを使用していくので、拡張子はSCSSです。

Styled JSX

export const StyledJsx = () => {
  return ( 
    <>    
      <div className="container">
        <p className="title">- Styled Jsx-</p>
        <button className="button">FIGHR!</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>
    </>
  );
};

styled components

import styled from "styled-components";

export const StyledComponets = () => {
  return (
    <SContainer>
      <STitle>-Styled componets-</STitle>
      <SButton>FIGHT!</SButton>
    </SContainer>
  );
};

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;
`;

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

Emotion

Emotionには2通りの記述方法があります。

//↓↓jsxを使用する場合のお決まりの記述
/** @jsx jsx */
import { jsx, css } from "@emotion/react"
import styled from "@emotion/styled"

export const Emotion = () => {
//@emotion/reactを使用した書き方
  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}>- Emotion -</p>
      <SButton>FIGHT!</SButton>
    </div>
  );
};

//@emotion/styledを使用した書き方
const SButton = styled.button`
    background-color: #abedd8;
    border: none;
    padding: 8px;
    border-radius: 8px;
    &:hover {
      background-color: #46cdcf;
      color: #fff;
      cursor: pointer;
`;