React

通过JS改变CSS

Styled

代码示例：

// src/App.jsx

import React from "react";
import {createRoot} from "react-dom/client";
import Animation from "./styled-components/Animation";

createRoot(document.getElementById('root')).render(<Animation/>)

// src/styled-components/App.jsx

import React from "react";
import {StyledFooter} from "./StyledAll";

export default function App() {
    return (
        <StyledFooter>
            <ul>
                <li>首页</li>
                <li>内容</li>
                <li>我的</li>
            </ul>
        </StyledFooter>
    )
}

// src/styled-components/Pierce.jsx

import React from "react";
import {StyledInput, StyledDiv} from "./StyledAll";

export default function Pierce() {
    return (
        <div>
            <StyledInput type="text" placeholder={'请输入'}/>
            <StyledDiv bg={'gray'}/>
        </div>
    )
}

// src/styled-components/Custom.jsx

import React from "react";
import {StyledChild} from './StyledAll'

function Child(props) {
    // 接收传过来的样式属性
    return (
        <div className={props.className}>
            Child
        </div>
    )
}
export {Child}

export default function Custom() {
    return (
        <div>
            <StyledChild/>
        </div>
    )
}

// src/styled-components/StyledAll.jsx

import styled, {keyframes} from "styled-components";
import {Child} from "./Custom";

// 变量名规范写法（支持嵌套写法）
const StyledFooter = styled.footer`
  background: #30363d;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;

  ul {
    display: flex;
    list-style: none;

    li {
      flex: 1;

      &:hover {
        background: #1f1e33;
      }
    }
  }
`

// 原生属性直接透传过去
const StyledInput = styled.input`
  outline: none;
  border-radius: 10px;
  border-bottom: 1px solid gray;
`

// 自定义属性(||：没有对应的自定义属性时默认的样式)
const StyledDiv = styled.div`
  background: ${props => props.bg || 'aqua'};
  width: 100px;
  height: 100px;
`

// 高阶组件封装时会传一个props属性给包装的组件
const StyledChild = styled(Child)`
  background: aquamarine;
`

// 样式扩展（继承）
const StyledButton01 = styled.button`
  width: 100px;
  height: 100px;
  background: #30363d;
`

const StyledButton02 = styled(StyledButton01)`
  background: aqua;
`

// 加动画
const myanimation = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`
const StyledDiv02 = styled.div`
  width: 100px;
  height: 100px;
  background: aqua;
  animation: ${myanimation} 1s infinite;
`

export {
    StyledFooter,
    StyledInput,
    StyledDiv,
    StyledChild,
    StyledButton01,
    StyledButton02,
    StyledDiv02
}

// src/styled-components/Animation.jsx

import React from "react";
import {StyledDiv02} from "./StyledAll";

export default function Animation() {
    return (
        <div>
            <StyledDiv02/>
        </div>
    )
}

// src/styled-components/Extend.jsx

import React from "react";
import {StyledButton01, StyledButton02} from './StyledAll'

export default function Extend() {
    return (
        <div>
            <StyledButton01>Button01</StyledButton01>
            <StyledButton02>Button02</StyledButton02>
        </div>
    )
}