InlineStyle

export const InlineStyle = () => {

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

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

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

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>
    </>
  );
};

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

쓰는 방법의 궁리

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

이모션

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

인라인 스타일과 비슷한 쓰기

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

참고