Office UI Fabric反应mergeStyles：hover选择器

Question

我正在使用出色的Office UI织物包，并且对如何使:hover伪选择器按需运行感到困惑。

基本上我想做的是这样：

export const getMainNavClassNames = (): IMainNavClassNames => mergeStyleSets({
    nav: {
        selectors: {
            '& .ms-Nav-compositeLink:hover': {
                background: theme.palette.themeDark
            }
        }
    }
});

但是，如果类之间没有空格，：hover选择器将不起作用。以下可以工作，但是它选择了.ms-Nav-compositeLink的子级，这不是我想要的。

export const getMainNavClassNames = (): IMainNavClassNames => mergeStyleSets({
    nav: {
        selectors: {
            '& .ms-Nav-compositeLink :hover': {
                background: theme.palette.themeDark
            }
        }
    }
});

我已经尝试过根据documentation想到的所有排列。

Answer 1

事实证明选择器确实按预期工作，但是我需要使用devtools适当地定位类，以更加了解类css层次结构。仔细查看mergeStyle生成的className有助于确定要定位的样式。