How to change css property in react

I want to change css width property of my element on some condition

<div className="consoleLayoutRoot-sideMenu">
        <ConsoleSideMenu />
 </div>

css

.consoleLayoutRoot-sideMenu .ant-menu {
  padding-top: 30px;
  height: 100%;
  width: 50px;
  /* background-color: #191146 !important; */
}

I am doing this way..but nothing is happening

document.getElementsByClassName("consoleLayoutRoot-sideMenu.ant-menu ").style.width = "50px";