[React] ReactのCSSの当て方

ReactのCSSの当て方の種類について勉強した時のメモです。

今回当てているCSSは全て以下のスタイルで統一しています。

![スクリーンショット 2021-10-13 7.30.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/974719/96e36c09-5e54-8e51-e641-342f236574f9.png)


## InlineStyle
```react
export const InlineStyle = () => {

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

  return (
    <div style={contaierStyle}>
      <p>スタイル</p>
    </div>
  )
}
```
- コンポーネント内にスタイルを記述していくReactがデフォルトで提供している方法。
- CSSプロパティはキャメルケース文字列のように `""` で囲い `,` で区切る。

## CSSModules
```react
import classes from "./CssModules.module.scss";

export const CssModules = () => {
  return (
    <div className={classes.container}>
      <p>スタイル</p>
    </div>
  );
};
```

```react
.container {
  border: solid 2px #329eff;
  border-radius: 20px;
  padding: 8px;
  margin: 8px;
}
```
- CSSを別ファイルに切り出してimportする方法。
- 切り出すCSSファイル名にはmoduleをつける。
- CSSの書き方は普通のCSSの書き方と同じ。
- `node-scss`をインストールすることで使用可能。


## Styled JSX
```react
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>
    </>
  );
};
```
- JSXの中でスタイルを書いていく方法。
- デフォルトだと`hover`などの疑似要素は使用できない。
- Next.jsに標準搭載されている。
- `styled-jsx`をインストールすることで使用可能。

## Styled-Components
```react
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;
`;
```
- スタイルで当てたコンポーネントを当てていく方法。
- コンポーネントファイルで`styled-components`をimportする必要がある。
- `styled-components`をインストールすることで使用可能。

### 書き方の工夫
```react
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;
`;
```
コンポーネント名の頭文字をSにすることでぱっと見でスタイルを当てているコンポーネントだと分かるのでこの書き方はおすすめ。

## Emotion 
- Emotionは色々な書き方がある方法。
- 1行目に`/** @jsx jsx */`と書く必要がある。
- `@emotion/react`と`@emotion/styled`をインストールする必要がある。

### CSSと同じ書き方ができる方法
```react
/** @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>
  );
};
```

### inline styleと似た書き方
```react
/** @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と似たような書き方
```react
/** @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;
`;
```

# 参考

https://www.udemy.com/course/react_stepup/