溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
