React 基础知识~样式组件/ _ js 中的 css_

• 如果我们想在 javascript 文件中将样式编写为 css 样式，我们可以使用样式组件。

• 我们需要使用类似 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. 我们需要将样式化组件设置为 styled.element。
   这是一个例子。
   const StyledButton = styled.button
   //样式
   ;.

2. 我们可以像这样将 prop 传递给样式组件。
   来自：
   至：背景：${({ isSelected }) => (isSelected ? "pink" : "")};

3. 我们可以在样式组件中设置媒体查询，如下所示
   @media（最大宽度：600px）{
   边框半径：0；
   }

4. 我们可以像这样在样式组件中实现其他样式。
   const OrangeButton = styled(StyledButton)

5. 我们可以像这样在样式组件中设置伪元素。
   :悬停{
   颜色：红色；
   不透明度：0.7；
   }

・cliekd 之前的普通按钮（灰色按钮）。

・cliekd 之后的普通按钮（粉红色按钮）。

・cliekd 之前的橙色按钮。

・cliekd 之后的橙色按钮。

以上是React 基础知识~样式组件/ _ js 中的 css_的详细内容。更多信息请关注PHP中文网其他相关文章！