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


https://www.npmjs.com/package/styled-jsx

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

https://www.npmjs.com/package/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

https://www.npmjs.com/package/@emotion/react

```
npm i @emotion/react
```

https://www.npmjs.com/package/@emotion/styled

```
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番上にコメントおまじないを書く必要がある
様々な書き方に対応している


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

https://zenn.dev/aono/articles/30cf46b2ac31e8