如何更改颜色：Vue.js的AntD菜单组件中的ant-menu-submenu-arrow悬停？

Question

我正在为Vue.js使用Ant Design（antd）组件库。 菜单组件非常易于使用： https://vue.ant.design/components/menu/

我只想更改链接的“：hover”颜色（从默认的蓝色更改为红色），这可以通过覆盖CSS类来实现。 但是对我来说很难（避免使用丑陋的解决方法）更改“子菜单箭头”的颜色，该颜色仍然为蓝色。

这是一个简单的示例： https://codesandbox.io/embed/vue-antd-sub-menu-arrow-color-34vlx

有人尝试过吗？

Answer 1

尝试

.ant-menu-submenu-title:hover {
    .ant-menu-submenu-arrow::before, .ant-menu-submenu-arrow::after {
        background: red!important;
    }
}

但是在样式标签上使用lang =“ scss”，以便您可以编译scss或仅使用css语法修复我的脚本。

Answer 2

在style标签中尝试以下操作：

.ant-menu-submenu-arrow {
  ::before {
    background: red
  }
}