chapter3
const ReducerDemo: FC = () => {
const context = useContext(ThemeContext);
if (isNil(context)) return null;
const {
state: { mode, compact },
} = context;
return (
<div className={$styles.container}>
<h2 className="tw-text-center">useReducer Demo</h2>
<div className="tw-flex tw-flex-col tw-items-center">
<p>主题模式: 「{mode === 'dark' ? '暗黑' : '明亮'}」</p>
<p>是否紧凑: 「{compact ? '是' : '否'}」</p>
<div className="tw-mb-5 tw-flex-auto">
<ThemeConfig />
</div>
<div className="tw-max-w-md">
<Calendar fullscreen={false} />
</div>
</div>
</div>
);
};
有点疑惑，切换 暗色、亮色主题的时候，为什么 ‘主题模式’， ‘是否紧凑’ 等文字的颜色也会跟着变？
