滚动时Navbar透明问题求助：需保持始终纯白不透明

我遇到了Navbar的样式问题：期望滚动页面时，Navbar始终保持纯白不透明状态，但实际滚动时它会变为透明。

• 初始状态：
• 滚动时状态：

它应该始终保持纯白状态。

以下是我的Navbar组件代码：

import { useEffect, useRef, useState } from "react";
import { FaBars } from 'react-icons/fa'
import { GrClose } from 'react-icons/gr'
import { Drawer } from "@mui/material";
import Switch from '@mui/material/Switch';
import { MdOutlineDarkMode } from "react-icons/md"
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemIcon from '@mui/material/ListItemIcon';
import ListItemText from '@mui/material/ListItemText';
import Divider from '@mui/material/Divider';

const Navbar = () => {
  const [isOpen, setIsOpen] = useState(false);
  const sidebarRef = useRef(null) // outside click reference point

  const toggleSidebar = (event) => {
    event.stopPropagation(); // prevent sidebar from not opening
    console.log("opening sidebar")
    setIsOpen(!isOpen);
  }

  const closeSidebar = (event) => {
    if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
      setIsOpen(false);
      console.log("closing sidebar");
    }
  }

  useEffect(() => {
    document.addEventListener("click", closeSidebar);

    return () => {
      document.removeEventListener("click", closeSidebar)
    };
  }, []);

  const sidebarStyle = {
    width: "300px",
    height: "100vh", 
    position: "fixed",
    borderRadius: isOpen ? "0 20px 20px 0" : "0",
    top: 0,
    left: isOpen ? 0 : -300,
    backgroundColor: "#f1f5f9",
    overflowX: "hidden",
    transition: "all 0.3s",
    zIndex: 1,
    boxShadow: isOpen ? "-10px 0px 10px rgba(0, 0, 0, 0.2)" : "none",
  };
  
  const drawer = (
    <Drawer anchor="left" open={isOpen} onClose={() => setIsOpen(false)}>
      <div style={sidebarStyle} ref={sidebarRef}>
        <div className="sidebar-content flex flex-row justify-center pt-4 pl-56 ">
          <GrClose onClick={toggleSidebar} className="close-button text-xl"></GrClose>
        </div>
        <ul className="flex flex-col pt-4 pl-4">
          <div className="flex items-center" id="list-item">
            <MdOutlineDarkMode className="text-xl"/>
            <h1 className="pl-1">Dark mode</h1>
            <Switch />
          </div>
          <div className="flex items-center" id="list-item">
            
          </div>
        </ul>
      </div>
    </Drawer>
  );

  return (
    <navbar className="bg-white sticky top-0" style={{ backgroundColor: '#fff' }}>
      {drawer}
      <div className="flex custom-padding padding-left space-x-1 items-center">
        <div className="sidebar-button-container">
          <FaBars className="sidebar-button text-xl" onClick={toggleSidebar} />
        </div>
        <h1 className="font-bold text-xl">LIVESCORE</h1>
        <span id="football-emoji">⚽</span>
      </div>
      <div className="navbar-line mt-3">
      </div>
    </navbar>
  );
}

export default Navbar;

我已尝试的方法 #

• 通过内联样式设置背景色：<navbar className="sticky top-0" style={{ backgroundColor: '#fff' }}>
• 通过Tailwind类设置背景色：<navbar className="bg-white sticky top-0">
• 尝试在标准CSS文件中设置Navbar的背景色，均无效。

可能的解决方向 #

1. 提升Navbar的层级：给Navbar添加更高的z-index，确保它不会被页面其他内容覆盖。比如修改className为bg-white sticky top-0 z-50，或者在内联样式中添加zIndex: 100。
2. 强制设置不透明度：明确添加不透明度属性，避免被全局样式影响。可以添加Tailwind类opacity-100，或者内联样式style={{ backgroundColor: '#fff', opacity: 1 }}。
3. 排查全局滚动样式：检查是否有全局CSS在页面滚动时给Navbar或其父元素添加了透明效果，比如scroll事件触发的类名变化。
4. 调整MUI Drawer的层级：当前Drawer的zIndex设置为1，Navbar的层级需要高于它，确保顶部导航不会被侧边栏的样式影响。

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