React Basics ~ composant de style/ css_ dans _ js

• Si nous voulons écrire le style en tant que style CSS dans un fichier javascript, nous pouvons utiliser les composants stylés.

• Nous devons installer les composants stylisés avec une commande comme celle-ci 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. Nous devons définir les composants stylisés comme styled.element.
   Ceci est un exemple.
   const StyledButton = styled.bouton
   //styles
   ;.

2. Nous pouvons passer un accessoire aux composants stylisés comme celui-ci.
   de :
   à : arrière-plan : ${({ isSelected }) => (isSelected ? "rose" : "")};

3. Nous pouvons définir une requête multimédia dans les composants stylisés comme celui-ci
   @media (largeur maximale : 600 px) {
   rayon de bordure : 0;
   >

4. Nous pouvons implémenter l'autre style dans les composants stylisés comme celui-ci.
   const OrangeButton = styled(StyledButton)

5. Nous pouvons définir un pseudo-élément dans les composants stylisés comme celui-ci.
   :survolez {
   couleur : rouge ;
   opacité : 0,7 ;
   >

・Le bouton normal (bouton gris) avant de cliquer.

・Le bouton normal (bouton rose) après le clic.

・Le bouton orange avant de cliquer.

・Le bouton orange après le clic.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!