Open5
useContextを用いた背景色制御
ihch考えたいこと
- Index < LIGHT
- Section < LIGHT
- Component
- Section < DARK
- Component
上のような構造のときに Component の背景色を Section に合わせて見やすい色 (LIGHTの場合はDARK) にしたい
ihchあーふつうに Index とは別に Context 生成してそれを参照すればいいのか
ihch
<div>
<ThemeContext.Provider value={colorTheme.light}>
<Section>
<Component />
</Section>
</ThemeContext.Provider>
<ThemeContext.Provider value={colorTheme.dark}>
<Section>
<Component />
</Section>
</ThemeContext.Provider>
<div>
それ以下のコンポーネントでグローバルとしていい概念 context context
ihch// こんな風にできる
const Component = () => {
const theme = useContext(ThemeContext);
return <div className={theme === 'LIGHT' ? '-bgDark' : '-bgWhite'}>Text<div>;
}