Question

我从较少的变量中读到了关于自定义主题和样式的几篇文章，但是我可以在说的水平上进行修改

.ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow {
  right: 16px; // instead of left:16px
}

我想要什么？在这种情况下，我只希望箭头显示在Collapse.Panel组件的右边，而不是左边。

我从哪里复制样式？在组件的.css中。

即使可以通过.less修改和编译来实现，但这也不是最佳解决方案，因此是否愿意听取解决办法？

在更少的文件中，相同内容将转换为

 right: @padding-md; // instead of original entry of left:  @padding-md;

在自定义指南中，我只能修改变量。现在？

Answer 1

我不确定我是否理解您的问题，但是如何实现自己的Collaps.panel？

import 'myPanelStyle.css'
export default class MyCollapsePanel{
  render(){
    return(<Collapse.panel id="my-panle" {...this.props}>{this.props.children}</Collapse.panel>)
  }
}

myPanle.css：

#my-panle{
  .ant-collapse > .ant-collapse-item > .ant-collapse-header .arrow {
    right: 16px; // instead of left:16px
  }
}

通过这种方式，无论何时使用面板，都将如您所愿，并且不会破坏默认Antd库的任何其他CSS表格。

Answer 2

在css文件中编写以下代码

:global {
 .ant-collapse-header{
    //code
 }
}

自定义ant.design组件样式

2 个答案: