GroupingView/groupField header text inherits the text colour in the group by column

[pannel]

I have an issue where a part of the groupField/GroupingView header text is inheriting the colour set in the groupField column. I do not want this to happen.

Looking at the attached example image, the Critical text in the "Severity: Critical" string should stay blue, not be red.

I am setting the text colour in the column used for grouping by using the following function as a renderer:

    function colourSeverity(severity){
        if(severity == "Critical"){
            return '<span style="color:#aa0000;">' + severity + '</span>';
        }else if(severity == "Major"){
            return '<span style="color:#ee2200;">' + severity + '</span>';
        }else if(severity == "Minor"){
            return '<span style="color:#ee5500;">' + severity + '</span>';
        }else if(severity == "Warning"){
            return '<span style="color:#eeaa00;">' + severity + '</span>';
        }
        return severity;
    }

and am applying the renderer as such:

    {
        header: 'Severity',
        width: 70,
        sortable: true,
        dataIndex: 'severity',
        renderer: colourSeverity 
    },

Any thoughts on how to keep the header blue?

Thanks very much.

Cheers,

Mark