css - 为菜单 KendoReact 设置类名

Question

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

从“@progress/kendo-layout-react-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 菜单，它得到了更好的支持。您应该能够使用相同的方法。