CSS焦点样式不起作用但悬停是

Question

我试图在用户选中时突出显示一个按钮。我可以在悬停时突出显示，但焦点不起作用。

这是我的CSS：

#pagingBtn :focus, #pagingBtn :hover {
 background: red; 
}

（实际上并没有将它变成红色，因为测试时更容易看到，因为它非常明显）

这是我的按钮：

<CommandButton
 id="pagingBtn"
 disabled={fetching ? fetching : (count - (fileDisplayAmmount * page) <= fileDisplayAmmount)}
 data-automation-id='FileForward'
 iconProps={{ iconName: 'ChromeBackMirrored' }}
 onClick={() => pageFiles(query, fileDisplayAmmount, page + 1, orderBy, order)}>
Next
</CommandButton>

有任何想法如何解决这个问题？

提前致谢