Reactjs 如何在react应用中动态地改变主题

我正在尝试使用按钮或开关按钮（我稍后会决定）将react应用程序的主题从亮改暗（反之亦然）。事实是：我直接从bootswatch导入themes.css（我目前使用“Minty”作为亮主题，我想使用“Darkly”作为暗主题（））。现在我只发现有ThemeProvider组件，但它需要一个.js文件作为主题，在这个文件中你必须导出你想要的内容（我不能这样做，因为我只有.css）。我还在github（）上发现了一个ThemeSwitcher，但它似乎使用了BootstrapV3，而我实际上需要v4。Reddit上还有一个帖子建议将它们导入到公共文件夹并进行更改（），但我认为这不是一个好的做法。有人能帮我吗

编辑：我尝试了reddit解决方案：现在它正在改变主题，但在一瞬间我肯定可以看到一些我根本不喜欢的纯html内容。 这是我的密码

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Tabs from "./Tabs";
import "react-toastify/dist/ReactToastify.min.css";
import { Helmet } from "react-helmet"

export const Application = () =>{
    const [theme, setTheme] = useState(true)

    const changeThemeHandler = (event) => {
        event.preventDefault();
        setTheme(!theme)
    }

    return(
        <>
            <button onClick={(event) => changeThemeHandler(event)}>Change Theme</button>
            <Helmet>
                <link rel="stylesheet" href={`${process.env.PUBLIC_URL}/${theme ? 'lightbootstrap.min.css' : 'darkbootstrap.min.css'}`} />
            </Helmet>
            <Tabs />
        </>
    )
}

ReactDOM.render(<Application />, document.getElementById("root"));

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“/Tabs”导入选项卡；
导入“react toastify/dist/react toastify.min.css”；
从“反应头盔”导入{Helmet}
导出常量应用程序=（）=>{
const[theme，setTheme]=useState（true）
const changeThemeHandler=（事件）=>{
event.preventDefault（）；
setTheme（！theme）
}
返回(
changeThemeHandler（事件）}>更改主题
)
}
render（，document.getElementById（“根”））；

我如何调整它，使其从明暗主题平稳过渡，反之亦然