Set className for Menu KendoReact

Question

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?

score 1 · Accepted Answer · answered Dec 14 '18 at 08:39

1

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.

answered Dec 14 '18 at 08:39

Asen Arizanov

930
1
9
11

You mention about 'kendo-react-layout', right? It still don't have className for Menu component, right? – Bui Quang Huy Dec 14 '18 at 08:47
Yes, exactly. Unfortunately, it does not have 'className' prop. Still, it has 'style' prop. – Asen Arizanov Dec 14 '18 at 09:18

Set className for Menu KendoReact

1 Answers1