Override style for "Collapse" of antd react component library

by

I am using JSX syntax with *.css for my react component. 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

80 thoughts on “Override style for "Collapse" of antd react component library”

  24. I’ve been exploring for a little bit for any high-quality
    articles or weblog posts on this sort of house . Exploring in Yahoo I finally stumbled upon this site.
    Reading this information So i’m satisfied to convey that I’ve a very
    excellent uncanny feeling I found out just what I needed.
    I most for sure will make certain to don?t omit this website and give it a glance on a constant basis. http://herreramedical.org/azithromycin

    Reply

Leave a Comment