antd-mobile

安装

npm i antd-mobile

全局样式

在 src 下创建全局样式文件 theme.css

:root:root {
    --adm-color-primary: #a062d4
}

业务组件中使用 antd-mobile 的按钮并且使用自定义的全局样式后，默认的蓝色就被修改为紫色了

import { Outlet } from "react-router-dom"
import { Button } from 'antd-mobile'

const Layout = () => {
    return (
        <div className="layout">
            <h1>layout组件</h1>
            <Outlet />
            <Button color="primary">测试全局样式</Button>
        </div>
    )
}
export default Layout

局部样式

类似上面的全局样式，在主体文件 src/theme.css 中的代码为：

/* 全局 antd-mobile 按钮的 primary 类型为紫色背景色
:root:root {
    --adm-color-primary: #a062d4
} */

/* 局部样式 */
.purple {
    --adm-color-primary: #a062d4
}

业务组件中的 antd-mobile 按钮要使用该类名称

import { Outlet } from "react-router-dom"
import { Button } from 'antd-mobile'

const Layout = () => {
    return (
        <div className="layout">
            <h1>layout组件</h1>
            <Outlet />
            <Button color="primary">测试全局样式</Button>
            <Button color="primary" className="purple">局部样式生效</Button>
        </div>
    )
}
export default Layout