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中文網其他相關文章！