Установить className для меню KendoReact

Question

Я работаю над проектом React, использующим Kendo. За Menu составная часть

импортировать { Menu, MenuItem } из "@progress/kendo-layout-реакции-wrapper";

мы не можем установить className к этому контролю. Так каков правильный способ применения CSS для этого?

Я покрываю это с помощью className, используя вложенный css для установки css для этого следующим образом:

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

Есть ли лучшее решение?

Answer 1

Альтернатива - использовать свойство ReactDOM findDOMNode и DOM для элементов classList. Вы можете поместить это в свой компонент:

import * as ReactDOM from 'react-dom';

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

Существует также родное меню Kendo React, которое лучше поддерживается. Вы должны быть в состоянии использовать тот же подход для этого.