AntDVue ant-collapse 用干净的 CSS 改变箭头的方向

Posted 2023-02-16

【中文标题】AntDVue ant-collapse 用干净的 CSS 改变箭头的方向

【英文标题】：AntDVue ant-collapse change directions of arrows with clean CSS

【发布时间】：2021-12-14 16:18:16

【问题描述】：

如何更改 ant-collapse vue 箭头方向？

所以我遇到了一个问题，如果没有!important（我不喜欢..），我无法更改箭头方向，所以我们在我的工作中找到了解决这个问题的方法，感谢 Epuñan。

https://css-tricks.com/override-inline-styles-with-css/

所以最终我第一次使用 ant-collapse 组件时，我将箭头分别设置为向上和向下的道具，但现在我想做得很好，我做到了！这是解决方案

【参考方案1】：

嗯，有两种可能的解决方案，一种很漂亮，另一种不太好看。为了时间，让我们先选择最漂亮的。

`::v-deep .ant-collapse-item > .ant-collapse-header .anticon 
  transform: rotate(90deg);
  transition: transform 0.5s ease-in-out;
`

这里我们设置了箭头的默认行为，所以它应该指向下方.. 但问题是当折叠处于活动状态时，箭头的行为是由内联样式设置的，所以很难到达那里..这是解决方案：

 ::v-deep .ant-collapse-item-active > .ant-collapse-header .anticon 
  transform: rotate(180deg);
  transition: transform 0.5s ease-in-out;

我们在折叠组件中搜索活动类，只搜索我们想要的任何转换属性。

丑陋的解决方案：

&[aria-expanded='true'] 
  .ant-collapse-arrow > svg 
  transform: rotate(180deg) !important;
  transition: all 0.5s ease-in-out;
      
   

用重要的覆盖..

【参考方案2】：

为了记录，这个解决方案不仅适用于 Vue 或 React、Less 或 Sass，而且适用于 Ant Design System：

.ant-collapse-item > .ant-collapse-header .anticon 
  transform: rotate(90deg);


.ant-collapse-item-active > .ant-collapse-header .anticon 
  transform: rotate(180deg);