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

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

Barbara Streisand

リリース： 2024-10-09 22:47:28

オリジナル

288 人が閲覧しました

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;

ログイン後にコピー

スタイル付きコンポーネントを styleed.element として設定する必要があります。
これは一例です。
const StyledButton = styled.button
//スタイル
;.
このようにスタイル付きコンポーネントに prop を渡すことができます。
from:
to: 背景: ${({ isSelected }) => (isSelected ? "ピンク" : "")};
このようにスタイル付きコンポーネントでメディアクエリを設定できます
@media (最大幅: 600px) {
境界半径: 0;
}
このようにスタイル付きコンポーネントに他のスタイルを実装できます。
const OrangeButton = styled(StyledButton)
このようにスタイル付きコンポーネントに疑似要素を設定できます。
:hover {
色: 赤;
不透明度: 0.7;
}