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

我将JSX语法与*.css一起用于react组件。下面是jsx代码

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

    </Collapse>

但问题是，我希望根据jsx代码中的某些条件动态地执行此操作。也就是说，我有一些这样的面板，每个面板都应该有不同的边框颜色，这取决于一些数据

TIA

您可以使用类名根据您的条件动态设置类，并使用类名设置边界

下面是一个基于按钮单击切换边框的示例：

组成部分

请在此处查看演示：

希望这有帮助

您可以使用类名根据您的条件动态设置类，并使用类名设置边界

下面是一个基于按钮单击切换边框的示例：

组成部分

请在此处查看演示：

---

希望这有帮助

您可以有条件地设置内联样式，请检查下面的代码

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>

---

您可以有条件地设置内联样式，请检查下面的代码

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>

---

我遇到了一个类似的问题，我想有条件地设置每个面板组件中标题的背景颜色，但不设置内容的样式。我选择使用css变量为样式表中的背景色提供规则

您可以添加一个css变量，该变量的值通过style对象在JavaScript中派生：

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

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

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

以下是应用于面板标题边框的此方法的代码笔：

---

我遇到了一个类似的问题，我想有条件地设置每个面板组件中标题的背景颜色，但不设置内容的样式。我选择使用css变量为样式表中的背景色提供规则

您可以添加一个css变量，该变量的值通过style对象在JavaScript中派生：

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

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

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

以下是应用于面板标题边框的此方法的代码笔：

---

谢谢Yash，这对单次崩溃有效。我有一个与少数面板崩溃，我想改变与条件的颜色。我需要一些方法来应用到面板，因为我循环通过我的数据，使多个面板内1折叠，并希望改变左边框颜色取决于数据。蒂亚什，这对单次崩塌有效。我有一个与少数面板崩溃，我想改变与条件的颜色。我需要一些方法来应用到面板，因为我循环通过我的数据，使多个面板内1折叠，并希望改变左边框颜色取决于数据。谢谢，我想以这种方式应用borderLeft，它适用于完全折叠，我只想应用于headernot内容区域。如果对面板应用相同的颜色，则整个面板的左边框颜色以及内容区域将发生更改。谢谢，我想以这种方式应用borderLeft，它适用于完全折叠，我只想应用于headernot内容区域。如果对面板应用相同的颜色，则整个面板的左边框颜色以及内容区域将发生更改。短暂性脑缺血发作