React夜间模式切换按钮点击后导航栏背景色无变化问题求助

• 导航栏使用了固定死的内联样式backgroundColor: "lightblue"，不受主题变量控制
• 现有主题配置中未定义导航栏对应不同主题的背景色参数

1. 补充主题配置变量 #

修改Themes.js，为深浅主题新增导航栏背景色配置：

import {createGlobalStyle} from 'styled-components';

export const lightTheme = {
 body: "#fff",
 fontColor: "#000",
 navBg: "lightblue" // 浅色主题导航栏保持你原本的浅蓝色
}

export const darkTheme = {
 body: "#000",
 fontColor: "#fff",
 navBg: "#2c3e50" // 深色主题导航栏可自定义色值，这里用深灰蓝色做示例
}

export const GlobalStyles = createGlobalStyle`
 body {
   background-color: ${props => props.theme.body}
 }
`

2. 改造导航栏为支持主题的styled组件 #

修改App.js，删除导航栏的硬编码内联样式，替换为读取主题变量的styled组件：

// 在App.js中原有StyledApp定义下方，新增导航栏styled组件
const StyledApp = styled.div`
  color: ${props => props.theme.fontColor}
`;
// 新增下面这段
const NavBar = styled.div`
  width: 100vw;
  height: 80px;
  background-color: ${props => props.theme.navBg};
`

找到原有导航栏的div标签，替换为新定义的NavBar组件即可：

{/* NAVBAR */}
<NavBar>
  <button onClick={themeToggler}>Change Theme</button>
  <Link to="/" style={{margin: 50}}>Home</Link>
  <Link to="/works" style={{margin: 50}}>Projets</Link>
  <Link to="/about" >L'agence</Link>
</NavBar>
{/* END OF NAVBAR */}

内容的提问来源于stack exchange，提问作者pedrofromperu