我有一个按钮可以更改navBar上的主题颜色,它正在工作。当我点击按钮时,背景颜色的变化速度比文本颜色快。“Home”、“Cadastros”、“Dash”、“Notas”比图标和MainLayout中Outlet中呈现的任何内容都先发生变化
Demonstration
相关代码
index.css
@tailwind base;
@tailwind components;
@tailwind utilities;
* {
@apply transition-all duration-300;
}
.lightTheme {
--background: 250, 250, 250;
--text: 0, 0, 0;
--title: 0, 0, 0;
--navBarShadow: 2, 6, 23, 0.1;
}
.darkTheme {
--background: 15, 23, 42;
--text: 250, 250, 250;
--title: 250, 250, 250;
--navBarShadow: 2, 6, 23, 0.2;
}
NavBar.jsx
import { Moon, Sun, User } from "lucide-react";
function NavBar({theme, onChangeThemeClick}) {
const themeIcon = theme === 'lightTheme' ? <Sun /> : <Moon />;
return (
<nav className={` ${theme} w-full h-15 absolute z-10 top-0 bg-background text-title p-4 shadow-navBarShadow shadow-lg `}>
<ul className="flex space-x-10 bg justify-end ">
<li ><a href="#" >Home</a></li>
<li><a href="#">Cadastros</a></li>
<li><a href="#">Dash</a></li>
<li><a href="#">Notas</a></li>
<li onClick={() => onChangeThemeClick()}><a href="#">
{themeIcon}
</a></li>
<li ><a href="#">
<User />
</a></li>
</ul>
</nav>
);
}
export default NavBar;
主容器.jsx
function MainContainer({theme, children}){
return(
<div className={`${theme} pt-20 z-0 w-full h-screen bg-background`}>
{children}
</div>
)
}
export default MainContainer;
注册表.jsx
function RegistrationsTable() {
return(
<div className="w-1/2 h-max bg-background text-text border-text">
<table>
<tbody>
<tr>
<td>
<p>adad</p>
</td>
</tr>
</tbody>
</table>
</div>
)
}
export default RegistrationsTable;
注册页面.jsx
import RegistrationsTable from "../components/RegistrationsTable.jsx";
function RegistrationsPage() {
return (
<>
<RegistrationsTable />
</>
);
}
export default RegistrationsPage;
主布局.jsx
import { useState } from 'react'
import NavBar from '../components/NavBar.jsx'
import { Outlet } from 'react-router-dom'
import MainContainer from "../components/MainContainer.jsx";
function MainLayout() {
const [theme, setTheme] = useState('lightTheme')
function onChangeThemeClick() {
if (theme === 'lightTheme'){
setTheme('darkTheme')
} else if (theme === 'darkTheme'){
setTheme('lightTheme')
}
}
return (
<>
<NavBar theme={theme} onChangeThemeClick={onChangeThemeClick} />
<MainContainer theme={theme}>
<Outlet />
</MainContainer>
</>
)
}
export default MainLayout
tailwind.config.js
export default {
content: ["./index.html", "./src/**/*.{html,js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
//Theme colors
background: "rgba(var(--background))",
text: "rgba(var(--text))",
title: "rgba(var(--title))",
navBarShadow: "rgba(var(--navBarShadow))",
},
},
},
plugins: [],
};
我试图将过渡持续时间应用于黑暗和光明主题,但不起作用。就像这样:
@tailwind base;
@tailwind components;
@tailwind utilities;
.lightTheme {
--background: 250, 250, 250;
--text: 0, 0, 0;
--title: 0, 0, 0;
--navBarShadow: 2, 6, 23, 0.1;
@apply transition-all duration-300;
}
.darkTheme {
--background: 15, 23, 42;
--text: 250, 250, 250;
--title: 250, 250, 250;
--navBarShadow: 2, 6, 23, 0.2;
@apply transition-all duration-300;
}
试图通过Outlet传递主题变量以在ClassName中使用它,但也不起作用