Recommended pattern for styling active tabs in v1?

I know the tracker says questions will be closed, but since this is a change from v0 to v1 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?
`

[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. 😃

[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.