Styled-Componentsの簡単な定理

反応の中で造形を行うには大体3つの方法がある.以下に、その1つのインライン方式を示します.

function App() {
  return (
    <div>
      <div style={{ width: 100, height: 100, backgroundColor: "red" }}></div>
    </div>
  );
}

あなたが見たように、一言が邪魔です.
これより良いモジュールです.cssメソッドもありますが、欠点はファイルを移動してclassNameを貼り付けることです.特定の条件でのスタイルを実現するにはclassNameを一緒に貼り付ける必要があります.
したがって,前述した3つの方法に欠点がないわけではないが,最良のstyled−componsesを用いてみる.

設定

npm i styled-components
or
yarn add styled-components

使用方法

const構成部品名=styled.ラベル名`属性:値;

import styled from "styled-components";

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: red;
`;

function App() {
  return (
    <div>
      <Box />
    </div>
  );
}

トランスファ

色の違いだけを作りたいなら、残りの2つの同じボックスで、propsでその色を伝えることができます.

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.color};
`;

function App() {
  return (
    <div>
      <Box color="red" />
      <Box color="blue" />
    </div>
  );
}

拡張

Boxと同じ幅、高さ、背景色を持つが、border半径が異なるCircle素子のみが作成された.

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.color};
`;

const Circle = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.color};
  border-radius: 50%;
`;

function App() {
  return (
    <div>
      <Box color="red" />
      <Circle color="blue" />
    </div>
  );
}

2つの構成部品には3つの同じプロパティがありますが、重複作成の効率は低下します.
const Circle = styled(Box)` `
これにより、CircleはBoxを拡張し、Boxのすべてのスタイル属性を持ち、独自のスタイルを追加することができます.

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${(props) => props.color};
`;

const Circle = styled(Box)`
  border-radius: 50%;
`;

function App() {
  return (
    <div>
      <Box color="red" />
      <Circle color="blue" />
    </div>
  );
}

タグの置換

ページには同じボタンが2つあります.1つはページ内で機能するボタンラベルで、1つはページを移動するaラベルです.styled-componsesを使用する場合
const Button = styled.button` `
const Link = styled.a` `
同じスタイルのプロパティを持つ要素をラベル名に変更して2つ作成する必要はありません.

const Button = styled.button`
  display: block;
  width: 100px;
  height: 50px;
  color: white;
  background-color: red;
  border-radius: 25x;
`;

function App() {
  return (
    <div>
      <Button>버튼</Button>
      <Button as="a">링크</Button>
    </div>
  );
}

as="a"を入れるだけでbuttonラベルではなくaラベルです.

タグのプロパティの設定

会員登録表を作成していますが、記入しなければならない入力がたくさんあります.では、以下のようにinputラベルごとにrequiredを書くべきではないでしょうか.styled-componsesを使用する場合は、そうする必要はありません.

const Input = styled.input`
  display: block;
  color: white;
  background-color: pink;
  margin-bottom: 10px;
`;

function App() {
  return (
    <div>
      <Input required />
      <Input required />
      <Input required />
      <Input required />
      <Input required />
      <Input required />
      <Input required />
    </div>
  );
}

ラベル名の後ろに.attrs()を貼り、()内に付与したい属性を対象として記入すればよい.

const Input = styled.input.attrs({ required: true })`
  display: block;
  color: white;
  background-color: pink;
  margin-bottom: 10px;
`;

function App() {
  return (
    <div>
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </div>
  );
}

各inputラベルにrequiredが含まれていることを確認できます.

アニメーション(Animation)

アニメーションを適用するには、キーフレームを読み込む必要があります.その後の使い方は基本的なCSSと変わりません.

import styled, { keyframes } from "styled-components";

const rotate = keyframes`
from{
  transform:rotate(0deg);
}
to{
  transform: rotate(360deg);
}
`;

const Rotator = styled.div`
  width: 100px;
  height: 100px;
  background-color: pink;
  animation: ${rotate} 1s linear infinite;
`;

function App() {
  return (
    <div>
      <Rotator />
    </div>
  );
}

親セレクタ(&)、ネスト

styled-conentsは、SASSのような親セレクタ&をサポートし、オーバーラップすることができる.

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: pink;
  span {
    color: white;
    &:hover {
      font-size: 48px;
    }
  }
`;

function App() {
  return (
    <div>
      <Box>
        <span>상자</span>
      </Box>
    </div>
  );
}

サブスタイル→アセンブリネスト

styled-componentでは、セレクタとして他のstyled-componentを使用できます.

const Text = styled.span`
  font-size: 20px;
`;

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: pink;
  ${Text}:hover {
    font-size: 48px;
  }
`;

function App() {
  return (
    <div>
      <Box>
        <Text>상자</Text>
      </Box>
      <Text>상자</Text>
    </div>
  );
}

「ボックス」の文字はすべてテキストスタイルに適用されますが、ボックス内のテキストにぶら下がっている場合にのみ、指定したスタイルが適用されます.

ThemeProvider

styled-conentsが提供するthemeProviderでは、オブジェクトとして色を収集するトピックをpropsとしてサブコンポーネントに渡すことができます.
色を変更する必要はなく、themeProviderによって渡されるトピックを変更するだけで済むので、ライトトピック、暗いトピックを実装するときに便利です.
index.js

import React from "react";
import ReactDOM from "react-dom";
import { ThemeProvider } from "styled-components";
import App from "./App";

const darkTheme = {
  textColor: "white",
  backgroundColor: "black",
};

const lightTheme = {
  textColor: "black",
  backgroundColor: "whitesmoke",
};

ReactDOM.render(
  <React.StrictMode>
    <ThemeProvider theme={lightTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

App.js

const Container = styled.div`
  background-color: ${(props) => props.theme.backgroundColor};
`;

const Text = styled.span`
  color: ${(props) => props.theme.textColor};
`;

function App() {
  return (
    <Container>
      <Text>테마가 무엇이오?</Text>
    </Container>
  );
}

<ThemeProvider theme={lightTheme}>の場合
<ThemeProvider theme={darkTheme}>の場合