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: <StyledButton isSelected={isSelected} onClick={clickHandler}>
   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.