0

我正在将UI5 Web 组件与 React 一起使用，并且我正在尝试在某个组件上提供具有样式的类，但该类不采用 CSS 文件中的样式。

有人能告诉我为什么吗？

这是“./Navbar.css”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";.

有谁知道为什么？

4

0 回答 0