React の基本~スタイリング コンポーネント/ css_ in _ js

• JavaScript ファイル内でスタイルを CSS スタイルとして記述したい場合は、styled-components を使用できます。

• この npm i styled-components のようなコマンドを使用して、スタイル付きコンポーネントをインストールする必要があります。

・src/Example.js

iimport { useState } from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  margin: auto;
  border-radius: 9999px;
  border: none;
  display: block;
  width: 120px;
  height: 60px;
  font-weight: bold;
  cursor: pointer;
  background: ${({ isSelected }) => (isSelected ? "pink" : "")};

  @media (max-width: 600px) {
    border-radius: 0;
  }
`;

const OrangeButton = styled(StyledButton)`
  background: orange;

  :hover {
    color: red;
    opacity: 0.7;
  }

  span {
    font-size: 2em;
  }
`;

const Example = () => {
  const [isSelected, setIsSelected] = useState(false);

  const clickHandler = () => setIsSelected((prev) => !prev);

  return (
    <>
      <StyledButton isSelected={isSelected} onClick={clickHandler}>
        StyledButton
      </StyledButton>

      <OrangeButton isSelected={isSelected} onClick={clickHandler}>
        <span>OrangeButton</span>
      </OrangeButton>

      <div style={{ textAlign: "center" }}>{isSelected && "Clicked!"}</div>
    </>
  );
};

export default Example;

1. スタイル付きコンポーネントを styleed.element として設定する必要があります。
   これは一例です。
   const StyledButton = styled.button
   //スタイル
   ;.

2. このようにスタイル付きコンポーネントに prop を渡すことができます。
   from:
   to: 背景: ${({ isSelected }) => (isSelected ? "ピンク" : "")};

3. このようにスタイル付きコンポーネントでメディア クエリを設定できます
   @media (最大幅: 600px) {
   境界半径: 0;
   }

4. このようにスタイル付きコンポーネントに他のスタイルを実装できます。
   const OrangeButton = styled(StyledButton)

5. このようにスタイル付きコンポーネントに疑似要素を設定できます。
   :hover {
   色: 赤;
   不透明度: 0.7;
   }

・cliekd前の通常ボタン(灰色のボタン)です。

・cliekd後の通常ボタン(ピンクボタン)

・cliekdの前のオレンジ色のボタン

・cliekd後のオレンジ色のボタン

以上がReact の基本~スタイリング コンポーネント/ css_ in _ jsの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。