0

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 }
optimista
  • 804
  • 1
  • 13
  • 27
  • 1
    As per @Oleg Isonen's answer below, give the parent element `padding-left` and `padding-right` instead of trying to give everything else `margin` or use the selector for children of the parent element – Ayushya Mar 30 '21 at 14:34

1 Answers1

1

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.

Oleg Isonen
  • 1,463
  • 10
  • 10
  • just wanted to learn more about this and context behind it. Is this common practice for good UX? Where can I read more, what should I search for? – Ayushya Mar 30 '21 at 14:32