[SOLVED] React JSS (current) element selector

React JSS (current) element selector - `&element`

Is there a working equivalent for current element selector in React JSS styling syntax?

'&element': { margin: 0 }

Use case

I have this style for all <Button> components in my application.

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

So if they appear in a row, the first one and the last one have appropriate margins.

However, sometimes I use

<Button component={Link} ../>

Which turns Button component into a element instead of button. This can mess up :first-of-type / :last-of-type selectors and cancel out margins for a element in between of the buttons.

My original intention was to set something like this, but this doesn't work.

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

So far, I'm using the alternative

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

Solution

Button element shouldn't be responsible for the margin, because it breaks encapsulation, your component shouldn't take care of outer space, its parent should be.