ReactでCSSを使ういろいろな手順(inline styles,CssModules, StyledJsx, styled-components, Emotion) @yukilulu0229

inline styles

単純にオブジェクトに格納て展開する
プロパティをcamelcaseにする必要がある

InlineStyle.jsx

import React from 'react';

const containerStyle = {
  border: "solid 2px #303030",
  borderRadius: "20px", // camelcaseにする必要がある
  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"
};

const InlineStyle = () => {
  return (
    <div style={containerStyle}>
      <h2 style={titleStyle}>InlineStyle</h2>
      <button style={buttonStyle}>InlineStyle</button>
    </div>
  );
};

export default InlineStyle;

CssModules

CssModules.jsx

import React from 'react';
import classes from "./CssModules.module.css"

const CssModules = () => {
  return (
    <section className={classes.container}>
      <h3 className={classes.title}>CssModules</h3>
      <button className={classes.button}>CssModules</button>
    </section>
)
  ;
};

export default CssModules;

importしたときに名前をつけてあげる

CssModules.module.css

.container {
    border: solid 2px #303030;
    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;
}

file名は xxx.module.css のように.moduleを拡張子の前につける

StyledJsx

npm i styled-jsx

StyledJsx.jsx

import React from 'react';

const StyledJsx = () => {
  return (
    <>
      <section className="container">
        <h3 className="title">StyledJsx</h3>
        <button className="button">StyledJsx</button>
      </section>

      <style jsx="true">{`
          .container {
              border: solid 2px #303030;
              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: red;
              }
          }
      `}</style>
    </>
  );
};

export default StyledJsx;

styleをわけるために <>>が必要となる
`` バッククォートで囲む

styled-components

npm i styled-components

StyledComponents.jsx

import React from 'react';
import styled from "styled-components";

const StyledComponents = () => {
  return (
    <Container>
      <Title>StyledComponents</Title>
      <Button>StyledComponents</Button>
    </Container>
  );
};

const Container = styled.section`
    border: solid 2px #303030;
    border-radius: 20px;
    padding: 8px;
    margin: 8px;
    display: flex;
    justify-content: space-around;
    align-items: center;
`

const Title = styled.h3`
    margin: 0;
    color: #3d84a8;
`

const Button = styled.button`
    background-color: #abedd8;
    border: none;
    padding: 8px;
    border-radius: 8px;
    &:hover {
        background-color: red;
    }
`

export default StyledComponents;

変数にスタイルを当ててタグ化とスタイルを当てることができるようになる

Emotion

npm i @emotion/react

npm i @emotion/styled

Emotion.jsx

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

const Emotion = () => {
  // emotion風
  const containerStyle = css`
      border: solid 2px #303030;
      border-radius: 20px;
      padding: 8px;
      margin: 8px;
      display: flex;
      justify-content: space-around;
      align-items: center;
  `;

  // inlineStyle風
  const titleStyle = css({
    margin: 0,
    color: "#3d84a8"
  });
  return (
    <section css={containerStyle}>
      <h3 css={titleStyle}>Emotion</h3>
      <Button>Emotion</Button>
    </section>
  );
};

// styled-component風
const Button = styled.button`
    background-color: #abedd8;
    border: none;
    padding: 8px;
    border-radius: 8px;

    &:hover {
        background-color: red;
    }
`

export default Emotion;

1番上にコメントおまじないを書く必要がある
様々な書き方に対応している

他に詳しく書いてあった記事