Стиль переопределения для "Свернуть" библиотеки компонентов antd реагирует

Question

Я использую синтаксис JSX с *. css для моего реактивного компонента. Ниже приведен antd collapse jsx-код.

    <Collapse
      defaultActiveKey={["1"]}
      expandIconPosition="right"
    >
      <Panel
        header="This is panel header with arrow icon"
        key="1"
      >
        <div>
          Body-123
        </div>
      </Panel>

    </Collapse>

Теперь я хотел бы только стилизовать (border: "3px solid red") часть заголовка Collapse, которую я мог бы сделать, используя ниже css

.ant-collapse > .ant-collapse-item > .ant-collapse-header

Но проблема в том, что я хотел бы сделать это динамически в зависимости от некоторых условий в коде jsx. То есть у меня есть несколько таких панелей, и у каждой должен быть свой цвет границы в зависимости от некоторых данных.

TIA

Answer 1

Вы можете использовать className для динамической установки класса на основе вашего состояния и использовать имя класса для установки границы.

Вот пример, который переключает границу на основе нажатия кнопки:

Компонент

const App = () => {
  const [hasBorder, setBorder] = React.useState(false);
  return (
    <React.Fragment>
      <Button onClick={() => setBorder(!hasBorder)}>Set Border</Button>
      <Collapse
        className={hasBorder ? "" : "active"}
        defaultActiveKey={["1"]}
        expandIconPosition="right"
      >
        <Panel header="This is panel header with arrow icon" key="1">
          <div>Body-123</div>
        </Panel>
      </Collapse>
    </React.Fragment>
  );
};

Стиль

.active.ant-collapse > .ant-collapse-item > .ant-collapse-header {
  border-top: 3px solid black;
}

Проверьте демо здесь: https://codesandbox.io/s/suspicious-grothendieck-submf

Надеюсь, это поможет!

Answer 2

Вы можете установить встроенный стиль условно, проверьте код ниже ...

const hasBorder = true;
<React.Fragment>
  <Collapse
    style={hasBorder ? {border: '3px solid black'} : {}}
    defaultActiveKey={["1"]}
    expandIconPosition="right"
  >
    <Panel header="This is panel header with arrow icon" key="1">
      <div>Body-123</div>
    </Panel>
  </Collapse>
</React.Fragment>