覆盖Antd的选定项颜色
覆盖Antd的选定项颜色
提问于 2018-09-11 19:33:58
我想重写background-color类的ant-menu-item-selected属性。默认情况下，它看起来是蓝色的。
import { Menu } from 'antd';
const { Item } = Menu;
//item2 will be rendered with the class 'ant-menu-item-selected'
const MyComp = () => (
<Menu theme="dark" defaultSelectedKeys={["item2"]} mode="horizontal">
<Item key="item1">Item 1</Item>
<Item key="item2">Item 2</Item>
</Menu>
);
ReactDOM.render(<MyComp />,document.getElementById('root'));我该怎么办？
谢谢你的帮助。
回答 7
Stack Overflow用户
回答已采纳
发布于 2018-09-12 12:44:20
首先，我在我的每个Ant Design元素上定义了一个CSS类：
<Item key="item1" className="customclass">Item 1</Item>然后我添加了CSS：
.ant-menu.ant-menu-dark .ant-menu-item-selected.customclass {
background-color: green; /*Overriden property*/
}customclass之前的第一部分将获得与Ant属性相同的优先级。类customclass只是添加了一些超越Ant所需的优先级。
Stack Overflow用户
发布于 2020-04-02 11:43:07
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
color: red;
border-bottom: 2px solid red;
}这对我有用！！太好了谢天谢地。
Stack Overflow用户
发布于 2018-09-11 19:38:44
在And-Design文档中，您有一个名为：style的选项
比如，你可以在里面放你想要的任何东西，比如style={{ backgroundColor: 'red' }}。您也可以在样式属性内产生hover效果。
如果我不知道女巫项目是活动的，如何使用
style属性？
非常简单，使用React，您可以设置一个状态管理，在选择项目时，您可以设置一个类似isActive的键，您可以应用您想要的样式，如果它不是真的，则什么也不应用。
为了知道女巫物品是被选中的，你有一个道具和Ant-D，他的名字叫onSelect。
请查看此链接：蚂蚁设计
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52283040
复制相关文章
相似问题
腾讯云开发者
