为菜单 KendoReact 设置类名

Question

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

import { Menu, MenuItem } from "@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 and 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。您应该可以使用相同的方法。

为菜单 KendoReact 设置类名

Set className for Menu KendoReact

css

sass

reactjs

kendo-react-ui