Focusstylingquestion:howcanIusetheparentfocustocontrolchildelementstyling?

Just a question of how to approach this in aphrodite.

I have a button, position relative. I have a very particular looking focus rectangle; it needs to be a border that's inset a few pixels. To accomplish this i make a child span, positioned absolute to cover the button, with a 1px border.

I only want the span to show when the button is focused. In a css selector, I might have a rule for something like

.

How can I pull this off in aphrodite, without manually listening to events and tracking the focus state? This is a very common behavior and I'd prefer to avoid all of the manual state management.

Radium approaches this by using the decorator that tracks the hover/active/focus state, and provides a getState method to pull the current value (although it doesn't seem to work with focus). So I am guessing that's the only solution here with this css approach.

Is there a way to have a rule that says: "only when the root is focused, apply this style to a child element"? As far as I can tell, no. I would have to track focus state manually and when it is true, then add the styling to the span.

I can do this with an

pseudoselector as well, but let's ignore that approach for a moment.

I can also achieve this with a css rule that is not generated by aphrodite.

该提问来源于开源项目：Khan/aphrodite