CODEWITHSUNDEEP
htmlcssreactjstypescriptantd
Amber Khan
Amber Khan

Reputation: 21

How to apply styling to Antd Collapse Panel header

I am trying to change the color of text in an ant panel header. Here is the full ant collapse component:

<Collapse accordion defaultActiveKey={defaultOpenPanel}>
  <StyledCollapsePanel key="tasksAssignedToMe" header={<TasksAssignedToMeHeader />}>
    <StyledTaskTable
      columns={COLUMNS}
      dataSource={tasksAssignedToMe}
      pagination={false}
      data-testid="tasksAssignedToMe"
      showHeader={false}
    />
  </StyledCollapsePanel>

  <StyledCollapsePanel key="tasksNotAssignedToMe" header="Tasks Not Assigned To Me">
    <StyledTaskTable
      columns={COLUMNS}
      dataSource={tasksNotAssignedToMe}
      pagination={false}
      data-testid="tasksNotAssignedToMe"
      showHeader={false}
    />
  </StyledCollapsePanel>

  <StyledCollapsePanel key="completedTasks" header="Completed Tasks">
    <StyledTaskTable
      columns={COLUMNS}
      dataSource={completedTasks}
      pagination={false}
      data-testid="completedTasks"
      showHeader={false}
    />
  </StyledCollapsePanel>
</Collapse>

I am trying to change the text color of the header in the last two StyledCollapsePanel's.

In my CSS file, I added styling like so:

export const StyledCollapsePanel = styled(Collapse.Panel)`
  .ant-collapse-content .ant-collapse-content-box {
    padding: 0px 0px 0px 28px;
  }
  .ant-col {
    color: 'hsl(214, 78%, 54%)';
    font-weight: 500;
    text-align: left;
    text-transform: uppercase;
  }
  .ant-collapse > .ant-collapse-item > .ant-collapse-header > .span {
    color: 'hsl(214, 78%, 54%)';
  }
`;

but it is not applying...not sure what I'm doing wrong here?

Upvotes: 2

Views: 7899

Answers (3)

Binh Truong
Binh Truong

Reputation: 91

From version 5, you don't need or shouldn't to overwrite the class .ant-collapse-header In v5.0, Ant Design import style definition of component from the component's folder, which you can find in

https://github.com/ant-design/ant-design/tree/master/components/theme/interface/components.ts

import type { ComponentToken as CollapseComponentToken } from '../../collapse/style';

So, if you go to https://github.com/ant-design/ant-design/tree/master/components/collapse/style/index.ts

You will see the component's token is defined in the Interface:

type CollapseToken = FullToken<'Collapse'> & {
  collapseContentBg: string;
  collapseHeaderBg: string;
  collapseHeaderPadding: string;  // HERE IS WHAT YOU FOUND
  collapsePanelBorderRadius: number;
  collapseContentPaddingHorizontal: number;
};

Then you scroll down, you will see collapseHeaderPadding is getting the value from tokens

const collapseToken = mergeToken<CollapseToken>(token, {
    collapseContentBg: token.colorBgContainer,
    collapseHeaderBg: token.colorFillAlter,
    collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, // HERE IS WHAT YOU NEED
    collapsePanelBorderRadius: token.borderRadiusLG,
    collapseContentPaddingHorizontal: 16, // Fixed value
  });

Those tokens are the Alias token Once you know the token name, you just need to overwrite the Alias token INSIDE component token definition as below:

"components": {
        "Collapse": {
            "borderRadiusLG": 8,
            "colorBgContainer": "#EEF6F7 ",
            "colorBorder": "#ffffff",
            "collapseHeaderPadding": "8px 4px",
            "paddingSM": 8,
            "padding": 4
        },
}

You can put it in JSON file and load it into ConfigureProvider either or using CssInJS or style object and pass it to style attribute of the Collapse Panel.

Here is the final result Custom collapse panel header

Upvotes: 2

M Hamid
M Hamid

Reputation: 11

Find the header class by inspecting and then add style like this:

.ant-collapse-header{
    color:rgb(49, 130, 252) !important;
}

Hope this solves the problem.

Upvotes: 1

Dehan
Dehan

Reputation: 21

Just got same problem before and I saw in docs that header parameter is in ReactNode type

I did this

const genExtra = () => (
  <span style={{color: 'green'}}> this is green</span>
);

return (
           
          <Collapse defaultActiveKey={['1']} ghost>
            <Panel header={genExtra()} key="1">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 2" key="2">
              <p>{text}</p>
            </Panel>
            <Panel header="This is panel header 3" key="3">
              <p>{text}</p>
            </Panel>
          </Collapse>
  );

hopefully this is answer can be accepted

Upvotes: 2

Related Questions