我正在尝试更改Ant面板标题中的文本颜色。下面是完整的Ant collapse组件:
<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>
我正在尝试更改最后两个StyledCollapsePanel
中标题的文本颜色。
在我的CSS文件中,我添加了如下样式:
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%)';
}
`;
但它不适用...不知道我做错了什么吗
2条答案
按热度按时间2mbi3lxu1#
以前遇到过同样的问题,我在文档中看到头参数是ReactNode类型
是我干的
希望这个答案能被接受
j8ag8udp2#
通过检查找到头类,然后添加样式,如下所示:
希望这能解决问题。