您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
在React中使用CSS变量来实现主题切换可以通过以下步骤:
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
import React, { useState } from 'react';
import './styles.css';
const App = () => {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(theme === 'light' ? 'dark' : 'light');
}
return (
<div className={`App ${theme}`}>
<h1>Theme Switch</h1>
<button onClick={toggleTheme}>Toggle Theme</button>
</div>
);
}
export default App;
.App {
background-color: var(--primary-color);
color: var(--secondary-color);
}
.dark {
--primary-color: #333;
--secondary-color: #fff;
}
通过以上步骤,你可以在React中使用CSS变量来实现主题切换。当用户点击切换主题按钮时,状态变量会改变,从而改变主题样式。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。