覆蓋antd react組件庫“Collapse”的樣式

Question

我的反應組件使用帶有 *.css 的 JSX 語法。 下面是antd 折疊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" ）折疊的標題部分，我可以在下面的 css 中使用

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

但問題是，我想根據 jsx 代碼中的某些條件動態執行此操作。 那就是我有幾個這樣的面板，每個面板都應該有不同的邊框顏色，具體取決於某些數據。

TIA

Answer 1

我遇到了一個類似的問題，我想有條件地設置每個 Panel 組件中標題的背景顏色的樣式，而不是內容的樣式。 我選擇使用 css 變量為樣式表中的背景顏色提供規則。

您可以使用您在 JavaScript 中通過 style 對象派生的值添加一個 css 變量：

style={{ ["--header-border"]: category.border }}

在您的 css 文件中，您可以在選擇器中將此值作為規則使用：

.collapse-panel-custom > .ant-collapse-header {
  border: var(--header-border, 1px solid black);
}

這是應用於面板標題邊框的此方法的代碼筆：

https://codepen.io/faltherr/pen/ZEBzeJe

Answer 2

您可以使用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 3

您可以有條件地設置內聯樣式，請檢查下面的代碼...

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>