antd react组件库“折叠”的覆盖样式

Question

我在我的反应组件中使用带有 *.css 的 JSX 语法。下面是antd collapsejsx 代码。

    <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 中派生的值的 css 变量：

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

然后，您可以在您的 css 文件中将此值用作选择器中的规则：

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

下面是这个方法的codepen应用于面板标题的边框：

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>