0

I'm using UI5 web components with React and I'm trying to give a class with styles on certain component, but the class doesn't take the styles from the CSS files.

Can someone tell my why?

Here is the "./Navbar.css" CSS files:

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

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

And here is the jsx file:

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>
  );
}

As you can see on the ui5-side-navigation, I give a class and give it on click reaction to change the class on click and it's already working. The class changes whenever I click, but the class doesn't take any style from the import "./Navbar.css";.

Does anyone know why?

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Renaldo Louis
  • 3
  • 1
  • You might need to use the devtools to see that the class actually applies to the element you want, and make sure that the UI library actually doesn't have any styling that would override yours. – PIG208 Jul 09 '21 at 04:08
  • are you sure ui5-side-navigation is supporting className? Documentation is not very clear... but i can't see any example. – Benedikt Kromer Jul 09 '21 at 07:20
  • im pretty sure it support className, because i when i inspect my website those component does have className, but doesnt have the css styling – Renaldo Louis Jul 09 '21 at 11:02
  • what i dont really understand is, when i try to explicitly insert the style on the html, it work just fine,as you can see that i comment those line on ui5-side-navigation, but when i try to use the class name it doesnt work :(, it does have the class name but not the style from the css i import – Renaldo Louis Jul 09 '21 at 11:04

0 Answers0