这确实是React JSS里很容易踩的选择器坑，我来帮你拆解下问题和可行的解决方案：

首先得明确为什么你试的&button:first-of-type不生效——在JSS语法里，&代表的是当前组件生成的类选择器（比如你的Button组件可能会生成类似.MuiButton-root这样的类名），直接写&button会被解析成.your-button-classbutton（类名和元素选择器连在一起，没有空格），这显然不是你想要的匹配逻辑。

正确的等效写法 #

你想要的“仅当组件根元素是<button>时，应用:first-of-type/:last-of-type样式”，可以用JSS结合CSS的:is()伪类来实现，写法如下：

'&:is(button):first-of-type': { marginLeft: 0 },
'&:is(button):last-of-type': { marginRight: 0 }

这个写法的逻辑是：

1. & 指向当前Button组件的根元素类选择器
2. :is(button) 限定仅当根元素是<button>类型时匹配
3. 再结合:first-of-type/:last-of-type，就能精准选中序列里第一个/最后一个原生按钮元素，完全不会影响被渲染成<a>的Button组件。

和你现有方案的对比 #

你当前用的&:first-of-type:not(a)也能解决问题，但:is(button)的写法更直观——它明确告诉别人“我只针对button元素”，而不是“排除a元素”。如果以后你的Button组件可能渲染成其他元素（比如<div>），这种写法的扩展性也更好，只要在:is()里添加对应的元素类型即可。

兼容性说明 #

:is()伪类现在已经被所有现代浏览器支持（Chrome 88+、Firefox 78+、Edge 88+、Safari 14+），完全不用担心兼容性问题。

总结一下：React JSS里没有&element这种简写语法，但用&:is(element)就能实现你想要的“针对当前组件根元素类型”的选择逻辑。

内容的提问来源于stack exchange，提问作者optimista