React Basics~komponen penggayaan/ css_ dalam _ js

• Jika kita ingin menulis gaya sebagai gaya css dalam fail javascript, kita boleh menggunakan komponen gaya.

• Kita perlu memasang komponen gaya dengan arahan seperti 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. Kita perlu menetapkan komponen yang digayakan sebagai elemen yang digayakan.
   Ini adalah contoh.
   const StyledButton = styled.button
   //gaya
   ;.

2. Kita boleh menghantar prop kepada komponen gaya seperti ini.
   daripada:
   kepada: latar belakang: ${({ isSelected }) => (isSelected ? "pink" : "")};

3. Kami boleh menetapkan pertanyaan media dalam komponen gaya seperti ini
   @media (lebar maksimum: 600px) {
   jejari sempadan: 0;
   }

4. Kami boleh melaksanakan gaya lain dalam komponen gaya seperti ini.
   const OrangeButton = digayakan(StyledButton)

5. Kita boleh menetapkan elemen pseudo dalam komponen gaya seperti ini.
   :tuding {
   warna: merah;
   kelegapan: 0.7;
   }

・Butang biasa(Butang kelabu) sebelum kliekd.

・Butang biasa (butang merah jambu) selepas kliekd.

・Butang oren sebelum kliekd.

・Butang oren selepas kliekd.

Atas ialah kandungan terperinci React Basics~komponen penggayaan/ css_ dalam _ js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!