这是我学习React CSS应用方式的笔记。

这次所使用的CSS全部统一采用以下样式。

行内样式

export const InlineStyle = () => {

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

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

• コンポーネント内にスタイルを記述していくReactがデフォルトで提供している方法。

CSSプロパティはキャメルケース文字列のように “” で囲い , で区切る。

CSS模块化

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

• CSSを別ファイルに切り出してimportする方法。

• 切り出すCSSファイル名にはmoduleをつける。

• CSSの書き方は普通のCSSの書き方と同じ。

node-scssをインストールすることで使用可能。

Styled JSX，即样式化的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>
    </>
  );
};

• JSXの中でスタイルを書いていく方法。

• デフォルトだとhoverなどの疑似要素は使用できない。

• Next.jsに標準搭載されている。

styled-jsxをインストールすることで使用可能。

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

• スタイルで当てたコンポーネントを当てていく方法。

• コンポーネントファイルでstyled-componentsをimportする必要がある。

styled-componentsをインストールすることで使用可能。

书写技巧

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は色々な書き方がある方法。

• 1行目に/** @jsx jsx */と書く必要がある。

@emotion/reactと@emotion/styledをインストールする必要がある。

可以以与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>
  );
};

类似于”inline style”的写法。

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

请提供更多的上下文信息。