javascript - React JS 暗模式样式组件不适用于所有组件。如何解决？

Question

这是我在 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;