React 基礎知識~樣式元件/ _ js 中的 css

React 基礎知識~樣式元件/ _ js 中的 css_

Barbara Streisand

發布： 2024-10-09 22:47:28

原創

288 人瀏覽過

如果我們想在 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;

登入後複製

我們需要將樣式化元件設定為 styled.element。
這是一個例子。
const StyledButton = styled.button
//樣式
;.
我們可以像這樣將 prop 傳遞給樣式元件。
來自：
至：背景：${({ isSelected }) => (isSelected ? "pink" : "")};
我們可以在樣式元件中設定媒體查詢，如下所示
@media（最大寬度：600px）{
邊框半徑：0；
}
我們可以像這樣在樣式元件中實作其他樣式。
const OrangeButton = styled(StyledButton)
我們可以像這樣在樣式元件中設定偽元素。
:懸停{
顏色：紅色；
不透明度：0.7；
}