How can I change the color of a CommandBarItem's icon when it has a sub menu and that sub menu is open?

[scwood]

Here's a screenshot of what I'm having trouble with:

I have a <CommandBar /> with two items, and I want the icons to be black. I can't figure out a way to force the item with a sub menu to stay black when it's open. Here's the styles I've tried with no success. Can anyone let me know if this is possible?

const buttonStyles: Partial<IContextualMenuItemStyles> = {
    icon: { color: theme.palette.neutralPrimary },
    iconHovered: { color: theme.palette.neutralPrimary },
    iconPressed: { color: theme.palette.neutralPrimary },
    // options below are ones that I've tried to add with no success
    iconChecked: { color: theme.palette.neutralPrimary },
    iconColor: { color: theme.palette.neutralPrimary },
    iconExpanded: { color: theme.palette.neutralPrimary },
    iconExpandedHovered: { color: theme.palette.neutralPrimary },
    menuIcon: { color: theme.palette.neutralPrimary },
    menuIconChecked: { color: theme.palette.neutralPrimary },
    menuIconExpanded: { color: theme.palette.neutralPrimary },
    menuIconExpandedHovered: { color: theme.palette.neutralPrimary },
    menuIconHovered: { color: theme.palette.neutralPrimary },
    menuIconPressed: { color: theme.palette.neutralPrimary },
    subMenuIcon: { color: theme.palette.neutralPrimary },
};

const commandBarItems: ICommandBarItemProps[] = [
    {
        buttonStyles,
        key: 'clearFilters',
        text: 'Clear filters',
        iconProps: { iconName: 'ClearFilter' },
        disabled: disableClearFiltersButton,
        onClick: onClearFilters,
    },
    {
        buttonStyles,
        key: 'customizeColumns',
        text: 'Custom columns',
        iconProps: { iconName: 'TripleColumnEdit' },
        componentRef: menuRef,
        subMenuProps: {
            items: [{ key: 'empty', itemType: ContextualMenuItemType.Section }],
            onRenderMenuList: () => {
                return (
                    <CustomColumnsMenu
                        columns={columns}
                        hiddenColumns={hiddenColumns}
                        onApply={(newHiddenColumns) => {
                            menuRef.current?.dismissMenu();
                            onChangeHiddenColumns(newHiddenColumns);
                        }}
                    />
                );
            },
        },
    },
];

[scwood]

In case someone comes across this, there appears to be an open issue with the iconExpanded styling not applying.

Link to issue: #23300

For now, I think I'm just going to add !important to the color of the base icon style. Hate to do it but can't think of another option.

const buttonStyles: Partial<IContextualMenuItemStyles> = {
    icon: { color: `${theme.palette.neutralPrimary} !important` },
};