Reakit: Recommended pattern for styling active tabs in v1?

[Slapbox]

I know the tracker says questions will be closed, but since this is a change from v0 tov1 I felt this was still the appropriate place for this question.

In v0 the selected tab got an active class assigned to it in the DOM, which I was using. This was definitely not the best way to do things and I'm grateful for v1, but a bit confused about how to replicate that.

In emotion without reakit the pattern would be something like:

const StyledTab = styled.div(props => {
  return { color: props.currentId === props.selectedId ? "red" : "black" };
});

I'm not sure how that would translate to usage with reakit where I've got something like:

const StyledTab = styled(Tab)`
  // How can we access props here? Or is there some better pattern I'm overlooking?
`

[open-collective-bot[bot]]

Hey @Slapbox :wave:,

Thank you for opening an issue. We'll get back to you as soon as we can.
Please, consider supporting us on Open Collective. We give a special attention to issues opened by backers.

If you use Reakit at work, you can also ask your company to sponsor us :heart:.

[diegohaz]

Hi @Slapbox!

You can rely on aria attributes:
https://github.com/reakit/reakit/blob/8837557636432cd7c6202a67e5d7d2ad5fdd4db6/packages/reakit-system-bootstrap/src/Tab.ts#L27-L30

You can also use reakit-system-bootstrap implementation as a styling reference. It also uses emotion. :)

[Slapbox]

@diegohaz you're the man!

I love that upgrading to v1 is forcing me to learn new concepts and better patterns. Sure it's a pain, but it's indisputable progress and a better foundation to build an enterprise level application on.

Thanks so much!

[diegohaz]

I'm glad to hear that! :)

And I'm sorry about the migration pain. But, yeah, that's a huge improvement and a lot of effort has been made to make the v1 much more consistent and more likely to be adopted by big enterprise apps (I'm working on one). It shouldn't change too much even on future major versions.

[Slapbox]

It's totally worth the pain!