BUG: Using _odd does not work like CSS nth-child(odd)

🐛 Bug report

When I used _odd and instead of nth-child(odd) CSS selector, I’ve seen unexpected behaviours in the UI.

💥 Steps to reproduce

1. Go to http://github.com/ogzhanolguncu/ogzhanolguncu.com/blob/master/components/TimeLineItem.tsx and clone this repo
2. Find line number 22 and try adding _odd={{ left: "auto", right:"5px" }} By adding _odd, you will override existing CSS and break the solution.

🧐 Expected behaviour

_odd does not behave like an nth-child(odd)

🧭 Possible Solution

Not compulsory, but suggesting a fix would be great!

🌍 System information

Software	Version(s)
Chakra UI	v1
Browser	Chrome
Operating System	Windows

📝 Additional information

When CSS is used that’s the outcome:

With _odd

[nihalanisumit]

okay now applying the nth-of-type selector to all the children of the right-side-bar and this seems to be working for me. This is for anyone struggling to find a css solution.

<Box className=“right-side-bar” … > … </Box>

.right-side-bar > *:nth-of-type(odd) {
    background: #f6f6f6;
  }

  .right-side-bar > *:nth-of-type(even) {
    background: #e9e9e9;
  }

[with-heart]

I don’t have an answer to your question about SSR unfortunately, but I wanted to thank you for following up with a solution @nihalanisumit. Much appreciated that you’d think of others that might come later with a similar problem.