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

如何解决React JSS当前元素选择器 - `&element`

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 }

解决方法

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