Приложение может реагировать, не загружает стили CSS даже после того, как я его уже импортировал

Question

Я использую веб-компоненты UI5 с React, и я пытаюсь создать класс со стилями для определенного компонента, но класс не берет стили из файлов CSS.

Может кто-нибудь сказать мне почему?

Вот файлы CSS "./Navbar.css":

      .nav-menu {
  position: fixed;
  left: -100%;
  transition: 850ms;
  margin-top: 50px;
  width: 10rem;
}

.nav-menu.active {
  left: 0;
  transition: 350ms;
}

А вот и файл jsx:

      import React, { useState } from "react";
import "./Navbar.css";
import {
  Avatar,
  ShellBar,
  ShellBarItem,
  SideNavigation,
  SideNavigationItem,
  SideNavigationSubItem,
} from "@ui5/webcomponents-react";
import "@ui5/webcomponents-icons/dist/line-chart.js";
import "@ui5/webcomponents-icons/dist/horizontal-bar-chart.js";
import "@ui5/webcomponents-icons/dist/add.js";
import "@ui5/webcomponents-icons/dist/list.js";
import "@ui5/webcomponents-icons/dist/table-view.js";
import { Switch, Route, Redirect } from "react-router-dom";
import { Home } from "./home";
import { Detail } from "./detail";
import { useHistory } from "react-router-dom";

export function MyApp() {
  const history = useHistory();
  const backToHomeClick = () => {
    history.push("./");
  };
  const [sidebar, setSidebar] = useState(false);

  setTimeout(function () {
    //Start the timer
    const sideNavigation = document.querySelector("ui5-side-navigation");
    document
      .querySelector("#startButton")
      .addEventListener("click", (event) => setSidebar(!sidebar));
  }, 1000);

  return (
    <div>
      <ShellBar
        logo={<img src="reactLogo.png" />}
        profile={<Avatar image="profilePictureExample.png" />}
        primaryTitle="My App"
        // onClick={backToHomeClick}
      >
        <ui5-button
          icon="menu"
          slot="startButton"
          id="startButton"
        ></ui5-button>
        <ShellBarItem icon="add" text="Add" />
      </ShellBar>
      <ui5-side-navigation
        // style={{
        //   position: "fixed",
        //   left: 0,
        //   "margin-top": "50px",
        //   width: "10rem",
        // }}
        className={sidebar ? "nav-menu active" : "nav-menu"}
      >
      </ui5-side-navigation>
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/detail" component={Detail} />
        <Redirect from="/" to="/home" />
      </Switch>
    </div>
  );
}

Как видно на ui5-side-navigation, Я даю класс и даю ему реакцию на щелчок, чтобы изменить класс при щелчке, и он уже работает. Класс меняется всякий раз, когда я нажимаю, но класс не берет стиль из import "./Navbar.css";.

Кто-нибудь знает почему?