I'm attempting to modify the text color in the header of an ant panel. Below is the entire ant collapse component code:
<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'm aiming to change the text color of the header in the last two StyledCollapsePanel's.
In my stylesheet, I included the following CSS styling:
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%)';
}
`;
However, the style doesn't seem to be applying. I'm unsure of what I could be doing incorrectly here. Any suggestions?