Javascript 状态仅在控制台中工作，页面中的颜色未更改

我试图在滚动时将导航栏的背景颜色更改为白色，但我的代码仅在控制台中更改状态。 如何解决

下面是React和CSS代码

import React, { useState, useEffect } from 'react';
import '../index';

export default function Header() {
  const [headerColor, setHeaderColor] = useState('.header container');
  const listenScrollEvent = () => {
    window.scrollY > 250 ? setHeaderColor('#29323c') : setHeaderColor('transparent');
  };

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  });
  console.log(headerColor);
  return (
    <section id="header" style={{ color: headerColor }}>
      <div className="header container" style={{ color: headerColor }}>
   

/* Header section */
#header {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100vw;
  height: auto;
}
#header .header {
  min-height: 8vh;
  background-color: rgba(31, 30, 30, 0.24);
  transition: 0.3s ease background-color;
}
#header .nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  max-width: 1300px;
  padding: 0 10px;
}

import React，{useState，useffect}来自“React”；
导入“../index”；
导出默认函数头（）{
const[headerColor，setHeaderColor]=useState（“.header容器”）；
常量listenScrollEvent=（）=>{
window.scrollY>250？setHeaderColor（'#29323c'）：setHeaderColor（'transparent'）；
};
//与componentDidMount和componentDidUpdate类似：
useffect（（）=>{
addEventListener（'scroll'，listenScrollEvent）；
});
控制台日志（headerColor）；
返回(
/*标题部分*/
#标题{
位置：固定；
z指数：1000；
左：0；
排名：0；
宽度：100vw；
高度：自动；
}
#标题，标题{
最小高度：8vh；
背景色：rgba（31,30,30,0.24）；
过渡：0.3s轻松背景色；
}
#标题导航栏{
显示器：flex；
对齐项目：居中；
证明内容：之间的空间；
宽度：100%；
身高：100%；
最大宽度：1300px；
填充：0 10px；
}

我想把你的问题改为：“国家是如何运作的？” 您似乎正在使用一个名为“Header”的组件

import React，{useState，useffect}来自“React”；
导入“../index”；
导出默认函数头（）{
const headerColor=useState（{headerColor:'transparant'}）；
常量listenScrollEvent=（）=>{
window.scrollY>250？setHeaderColor（'#29323c'）：setHeaderColor（'transparent'）；
};
//让我们为setHeaderColor创建一个函数
setHeaderColor（彩色）{
这是我的国家({
头颜色：颜色
});
}
//与componentDidMount和componentDidUpdate类似：
useffect（（）=>{
addEventListener（'scroll'，listenScrollEvent）；
});
控制台日志（headerColor）；
返回(

“Hooks是React v16.7.0中的一个新特性，alpha useState是”Hook“=>setCount（count+1）}增加count值。DOC " 答案基于：

另请参阅： “正在使用React中的setState更新对象”

以及有关国家和地区的官方文件：

---

欢迎使用SO，代码本身可以工作，但我认为它有两个问题：1.

useState（“.header-container”）

.header

不是有效的类名。2.您说您想更改背景颜色，但“颜色”属性会更改字体的颜色，所以它应该是

背景颜色。3.这与您的问题无关，但您应该清理事件侦听器。要详细说明
header
是类的名称
。header
是您在css中用来表示希望设置名为
header
@的类的属性的语法，以避免出现任何错误
import React, { useState, useEffect } from 'react';
import '../index';

export default function Header() {
  const headerColor = useState({ headerColor : 'transparant' });
  const listenScrollEvent = () => {
    window.scrollY > 250 ? setHeaderColor('#29323c') : setHeaderColor('transparent');
  };

  //well lets create a func for setHeaderColor
  setHeaderColor(color){
    this.setState({
       headerColor: color
    });
  }

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    window.addEventListener('scroll', listenScrollEvent);
  });
  console.log(headerColor);

  return (
    <section id="header" style={{ background-color: headerColor }}>
      <div className="header container" style={{ background-color: headerColor }}>