React Basics~styling component/ css_ in _ js

• If we want to write the style as a css style in a javascript file, we can use the styled-components.

• We need to install the styled components with a command like this 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. We need to set the styled components as styeled.element.
   This is an example.
   const StyledButton = styled.button
   //styles
   ;.

2. We can pass a prop to the styled components like this.
   from:
   to: background: ${({ isSelected }) => (isSelected ? "pink" : "")};

3. We can set a media query in the styled components like this
   @media (max-width: 600px) {
   border-radius: 0;
   }

4. We can implement the other style in the styled components like this.
   const OrangeButton = styled(StyledButton)

5. We can set a pseudo-element in the styled components like this.
   :hover {
   color: red;
   opacity: 0.7;
   }

・The normal button(Gray button) before cliekd.

・The normal button(Pink button) after cliekd.

・The orange button before cliekd.

・The orange button after cliekd.

The above is the detailed content of React Basics~styling component/ css_ in _ js. For more information, please follow other related articles on the PHP Chinese website!