Cómo aplicar estilo al encabezado del panel colapsable de Antd

Estoy tratando de cambiar el color del texto en el encabezado del panel ant. Aquí está el componente de colapso completo de ant:

<collapse accordion="" defaultactivekey="{defaultOpenPanel}">
  <styledcollapsepanel key="tasksAssignedToMe" header=""></styledcollapsepanel><tasksassignedtomeheader></tasksassignedtomeheader>}>
    <styledtasktable columns="{COLUMNS}" datasource="{tasksAssignedToMe}" pagination="{false}" data-testid="tasksAssignedToMe" showheader="{false}"></styledtasktable>


  <styledcollapsepanel key="tasksNotAssignedToMe" header="Tasks Not Assigned To Me">
    <styledtasktable columns="{COLUMNS}" datasource="{tasksNotAssignedToMe}" pagination="{false}" data-testid="tasksNotAssignedToMe" showheader="{false}"></styledtasktable>
  </styledcollapsepanel>

  <styledcollapsepanel key="completedTasks" header="Completed Tasks">
    <styledtasktable columns="{COLUMNS}" datasource="{completedTasks}" pagination="{false}" data-testid="completedTasks" showheader="{false}"></styledtasktable>
  </styledcollapsepanel>
</collapse>

Estoy tratando de cambiar el color de texto del encabezado en los últimos dos StyledCollapsePanel.

En mi archivo CSS, agregué estilos de la siguiente manera:

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%)';
  }
`;

Pero no se está aplicando… no estoy seguro de lo que estoy haciendo mal aquí?