Set className for Menu KendoReact

I'm working on React project that's using Kendo. For Menu component

import { Menu, MenuItem } from "@progress/kendo-layout-react-wrapper";

we cannot set className to that control. So what is the right way to apply css for it?

I'm covering it by a with className the using nested css to set css for that like this:

tsx:

<div className="menu-container">
        <Menu select={this.onSelect}>
        </Menu>
      </div>

css:

 .menu-container{
        .k-menu:not(.k-context-menu){
            background-color: #2f4f90;
            &:hover{
                background-color: #2b6ebd;
            }
        }
    }

Is there any better solution?

An alternative is to use ReactDOM findDOMNode and DOM elements' classList property. You could put this inside you component:

import * as ReactDOM from 'react-dom';

componentDidMount() {
    ReactDOM.findDOMNode(this).classList.add('MyClass');
}

There is also a native Kendo React Menu which is better supported. You should be able to use the same approach for it.