React JSS（当前）元素选择器 - `&element`

Question

在 React JSS 样式语法中是否有当前元素选择器的等效项？

'&element': { margin: 0 }

用例

我的应用程序中的所有 <Button> 个组件都有这种样式。

'&:first-of-type': { marginLeft: 0 },
'&:last-of-type': { marginRight: 0 }

因此如果它们出现在一行中，第一个和最后一个有适当的边距。

不过，有时我会用

<Button component={Link} ../>

将 Button 组件变成 a 元素而不是 button。这可能会弄乱 :first-of-type / :last-of-type 选择器并取消按钮之间 a 元素的边距。

我的初衷是这样设置的，但是不行。

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

到目前为止，我使用的是替代方案

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

Answer 1

按钮元素不应该负责边距，因为它破坏了封装，你的组件不应该负责外部 space，它的父元素应该是。