html 如何将样式应用于Antd折叠面板标题

nom7f22z 于 2022-12-16 发布在其他

关注(0)|答案(2)|浏览(154)

我正在尝试更改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%)';
  }
`;

但它不适用...不知道我做错了什么吗

Html

来源：https://stackoverflow.com/questions/70161267/how-to-apply-styling-to-antd-collapse-panel-header

2条答案

按热度按时间

2mbi3lxu1#

以前遇到过同样的问题，我在文档中看到头参数是ReactNode类型
是我干的

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

希望这个答案能被接受

赞(0）回复(0）举报 2022-12-16

j8ag8udp2#

通过检查找到头类，然后添加样式，如下所示：

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

希望这能解决问题。

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何将样式应用于Antd折叠面板标题

2条答案

相关问题

热门标签

最新问答