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

Question

Я работаю над проектом React, который использует Kendo.Для Menu компонента

import {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 и свойства classList элементов DOM .Вы можете поместить это в свой компонент:

import * as ReactDOM from 'react-dom';

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

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