[筆記] React Hooks 起來 – Ch4 – 實作深色主題 @地瓜大的飛翔旅程

章節連結

內容
程式碼
參考資料
系列文章

因為實務上的需要來熟悉 React，就趁機筆記一下從 Vue 3 轉 React Hooks 的一些細節差異。這邊筆記下深色模式的實作。

內容

1. 透過將 props 傳入值，將 css 做改變，這也是 css in js 的一個好處。 Vue 中也有類似的機制，你可以透過 props 的變動，讓寫在 template 的內容作變化
2. 不過當拆分的元件一多，這樣的傳值就顯得沒效率。你可以尋找有無 ThemeProvider 來包裹你的元件整體，這樣其內的每個小元件就可以直接取得樣式了，無需一個個傳值
3. ThemeProvider 已在 @emotion/react 內建
4. 若要符合 TS 規範，那需要額外定義 emotion.d.ts 並放置在 src 內

import "@emotion/react";

declare module "@emotion/react" {
    interface BaseTheme {
        backgroundColor: string;
        foregroundColor: string;
        boxShadow: string;
        titleColor: string;
        temperatureColor: string;
        textColor: string;
    }

    export type Theme = BaseTheme & {
        mode: "light" | "dark";
    };
}