实现简单的切换主题换肤的功能(umi框架)

这里我们先创建一个项目,这里我们参考umi官方文档https://v3.umijs.org/zh-CN/docs/getting-started
然后我们在pages文件夹中的index.tsx文件中编写代码
这里我们需要用到antd-mobile
这里 我们参考antd-mobile官方文档https://antd-mobile.gitee.io/zh/guide/quick-start
然后我们需要使用antd-mobile组件库中的NavBar组件

<NavBar backArrow={false} right={right} style={{ "backgroundColor": sco, color: "white" }}>用户登录</NavBar>

里面的backArrow属性是NavBar自带的属性,是关闭和开启我们的箭头的。
然后我们需要定义两个方法sco和right方法

const [sco, setSco] = useState("#123456")

这里我们给标题栏一个默认的颜色

const right = (
        <div style={{ fonstSize: 20 }}>
            <Space>
                <Button onClick={left} fill="none" style={{ color: "white" }}>切换主题</Button>
            </Space>
        </div>
    )

然后我们在定义的方法里面进行一个标签的使用,然后再添加一个点击事件来判断要渲染的颜色,
fill方法是antd-mobile自带的属性,来对我们样式进行改变
在这里插入图片描述
在这里插入图片描述

const [inp, setinp] = useState(["pink", "black", "red", "yellow"])
    let left = () => {
        let ids = Math.floor(Math.random() * inp.length)
        setSco(inp[ids])
    }

这里我们定义要改变的颜色,然后再left方法里面进行使用Math方法来进行判断要改变的颜色

你可能感兴趣的:(React知识大全,Css知识大全,js知识大全,javascript,前端,css)