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

按钮元素不应该负责边距，因为它破坏了封装，你的组件不应该照顾外层空间，它的父级应该是。