Home >Web Front-end >JS Tutorial >React Basics~styling component/ css_ in _ js

React Basics~styling component/ css_ in _ js

Barbara Streisand
Barbara StreisandOriginal
2024-10-09 22:47:28371browse
  • 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.
React Basics~styling component/ css_ in _ js

・The normal button(Pink button) after cliekd.
React Basics~styling component/ css_ in _ js

・The orange button before cliekd.
React Basics~styling component/ css_ in _ js

・The orange button after cliekd.
React Basics~styling component/ css_ in _ js

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn