如何解决React JS 暗模式样式组件不适用于所有组件如何解决?
这是我在 Header.js 组件中的代码。标题上的切换按钮!问题是黑暗模式仅适用于背景!组件不适合暗模式!我关注了样式组件的东西!
function Header() {
const [theme,setTheme] = useState('light');
// The function that toggles between themes
const toggleTheme = () => {
// if the theme is not light,then set it to dark
if (theme === 'light') {
setTheme('dark');
// otherwise,it should be light
} else {
setTheme('light');
}
};
return (
<ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
<header>
<GlobalStyles />
<div className={s.header__container}>
<div className={s.header__logo}>
<img src={headerlogo} alt='' />
</div>
<div className={s.header__sections}>
<p>Գլխավոր </p>
<p className={s.tags_ex}>
<p>Ծառայություններ</p> <img src={headerdown} alt='' />
</p>
<p className={s.tags_ex}>
Ֆակուլտետներ <img src={headerdown} alt='' />
</p>
<p>Բլոգ</p>
<p>Gshop</p>
<p>Կապ</p>
</div>
<div className={s.header__icons}>
<div className=''>
<SearchIcon
style={{
width: 32,height: 32,color: 'white',cursor: 'pointer',}}
/>
</div>
<div className={s.header__flag}>
<img src={headerflag} alt='' />
<ExpandMoreIcon style={{ color: 'white' }} />
</div>
<div className=''>
<Avatar
style={{ width: 33,height: 33,cursor: 'pointer' }}
src={headeravatar}
/>
</div>
<div className={s.switch_btn}>
<Switch
defaultChecked
color='default'
inputProps={{ 'aria-label': 'checkbox with default color' }}
onClick={toggleTheme}
/>
</div>
</div>
</div>
</header>
</ThemeProvider>
);
}
export default Header;
这是我的 BlogComponent 代码!当我切换黑暗模式时!这个组件一直是白色的!我做错了什么?
function Blog() {
return (
<div className={s.blog}>
<div className={s.blog__title}>
<h1>Բլոգ</h1>
<div className={s.blog__titleIcons}>
<img src={twitterblog} alt='' />
<img src={facebookblog} alt='' />
<img src={instagramblog} alt='' />
<img src={linkedinblog} alt='' />
</div>
</div>
<BlogComponent />
<BlogComponent />
<BlogComponent />
<BlogComponent />
</div>
);
}
export default Blog;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。