javascript - Override style for "Collapse" of antd react component library - Stack Overflow

admin管理员组

文章数量:1356761

I am using JSX syntax with *.css for my react ponent. Below is the antd collapse jsx code.

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

    </Collapse>

Now, I would like to only style(border: "3px solid red") the header part of the Collapse, which I could do using below css

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

But the issue is, I would like to do it dynamically depending on some condition in the jsx code. That is I have a few of such panels and each should have different border color depending on some data.

TIA

I am using JSX syntax with *.css for my react ponent. Below is the antd collapse jsx code.

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

    </Collapse>

Now, I would like to only style(border: "3px solid red") the header part of the Collapse, which I could do using below css

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

But the issue is, I would like to do it dynamically depending on some condition in the jsx code. That is I have a few of such panels and each should have different border color depending on some data.

TIA

• javascript
• html
• css
• reactjs
• antd

Share Improve this question Follow edited Feb 10, 2020 at 15:00 blueseal 2,91877 gold badges2828 silver badges4343 bronze badges asked Feb 6, 2020 at 6:33 user578219user578219 61722 gold badges1111 silver badges3636 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I ran into a similar issue where I wanted to conditionally style the background color of the header in each Panel ponent but not the content. I elected to use a css variable to provide a rule for the background color in my style sheet.

You can add a css variable with the value you derive in JavaScript through the style object:

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

In your css file you can then consume this value in as a rule in your selector:

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

Here is a codepen of this method applied to the border of the panel header:

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

You can use className to dynamically set the class based on your condition and use the class name to set the border.

Here is an example which toggles border based on button click:

Component

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>
  );
};

Style

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

Check the demo here: https://codesandbox.io/s/suspicious-grothendieck-submf

Hope this helps!

You can set inline style conditionally, check code below...

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>

本文标签： javascriptOverride style for quotCollapsequot of antd react component libraryStack Overflow