Настройка стиля компонентов ant.design

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

Введите приведенный ниже код в файл css

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

Answer 2

Я не уверен, что понимаю ваш вопрос, но как насчет реализации вашего собственного 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
  }
}

таким образом, каждый раз, когда вы используете вашу панель, она будет работать так, как вы пожелаете, и вы не повредите никакие другие листы CSS стандартной библиотеки Antd.