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;

We need to set the styled components as styeled.element.
This is an example.
const StyledButton = styled.button
//styles
;.
We can pass a prop to the styled components like this.
from: <StyledButton isSelected={isSelected} onClick={clickHandler}>
to: background: ${({ isSelected }) => (isSelected ? "pink" : "")};
We can set a media query in the styled components like this
@media (max-width: 600px) { border-radius: 0; }
We can implement the other style in the styled components like this.
const OrangeButton = styled(StyledButton)
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.

Blog

React Basics~styling component/ css_ in _ js

Ogasawara Kakeru

Join Our Newsletter. No Spam, Only the good stuff.

Related