为菜单KendoReact

Question

我正在研究使用Kendo的React项目。对于Menu组件

  

从“ @ progress / kendo-layout-react-wrapper”导入{Menu，MenuItem};

我们无法将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 elements' classList property。您可以将其放在组件内部：

import * as ReactDOM from 'react-dom';

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

还有一个native Kendo React Menu which is better supported。您应该能够使用相同的方法。