Style off parent element state

[kennetpostigo]

Hi i'm using radix primitives specifically the accordion. They set data-state on the trigger element, I have a child icon of a chevron that i'd like to rotate depending on the state.

I have the following styles, i'm trying to target the icon parent(this is the trigger) data state and rotate based on it:

trigger: {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  cursor: 'pointer',
  width: '100%',
},
icon: {
  transition: 'transform 0.3s ease',
  transform: {
    default: 'rotate(0deg)',
    ':has(button[data-state="open"])': 'rotate(180deg)',
  },
},

This isn't working, any suggestion on how to get this to work?

[zaydek]

In StyleX you would generally just write JavaScript to solve this. The other alternative is using CSS variables but that's kind of a trick and not really what you're looking for. If you look through the docs, StyleX is all about preventing side effects at a distance which is more or less what you're code is trying to do. Instead, you might want to author a variant like isOpen, isClosed, etc. and put your conditional styles there, then when the state is active, you use active && styles.isOpen or whatever you like to express the relationship.

[kennetpostigo]

@zaydek yep 100% agree, but the component library i'm using, radix implements their open states on the accordion this way. This is why i'm asking how to handle these specific "workaround" cases.

In addition most other UI libraries that are headless also use this method for styling based on state, react-aria, ark-ui, etc. For example check out this in react-aria for styling: https://react-spectrum.adobe.com/react-aria/Select.html#listboxitem-1

[BMCwebdev]

I don't know if Radix has a similar pattern, but I am able to do this with React Aria:
React Aria has all that state you linked tracked in render props. You can use them on the element itself. However, if you want children of that element to be able to you use them, you can wrap the children in the render props as well. Here is an example of using both methods:

    <ListBoxItem
      className={(renderProps: ListBoxItemRenderProps) => {
        return (
          stylex.props(
            choiceTileItemStyle.base,
            renderProps.isHovered && choiceTileItemStyle.hover,
            renderProps.isPressed && choiceTileItemStyle.pressed,
            renderProps.isFocusVisible && styleXFocusRing.base,
            ...etc.
          ).className || ''
        );
      }}
    >
      {(renderProps: ListBoxItemRenderProps) => (
        <Columns fullHeight={true} space="300">
          <Column width="1/4">
            <div {...stylex.props(
              percentWrapper.base,
              renderProps.isSelected && percentWrapper.selected,
            )}>
...

FYI the className={(renderProps: ListBoxItemRenderProps) => { will only work on React Aria components themselves as they are built to accept a function for classname.

[nmn]

Currently the answer to this is to define a variable on the button itself and use that button value for the child elemement icon. We have an RFC open to discuss this further.