StyleX库能否实现无需JS回调的group hover效果？

可以实现，不需要依赖onMouseEnter/onMouseOut等JS回调，核心是利用StyleX的**$nest嵌套选择器**特性，在父容器的样式中定义hover状态下的子元素样式规则。

实现步骤 #

1. 定义StyleX样式集合

通过$nest在父容器样式中，编写:hover状态下对所有子元素的样式修改规则：

import stylex from '@stylexjs/stylex';

const styles = stylex.create({
  // 父容器样式，包含hover触发的子元素样式规则
  groupContainer: {
    $nest: {
      '&:hover': {
        // 父容器hover时，修改呼叫按钮的背景色
        '& $callButton': {
          backgroundColor: '#3b82f6', // 对应blue-40的实际色值
        },
        // 父容器hover时，修改分割线的边框色
        '& $divider': {
          borderColor: '#9ca3af', // 对应gray-40的实际色值
        },
        // 父容器hover时，修改下拉按钮的背景色
        '& $dropdownButton': {
          backgroundColor: '#3b82f6',
        },
      },
    },
  },
  // 子元素基础样式
  callButton: {
    backgroundColor: '#60a5fa', // blue-50
    padding: '8px 16px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
  },
  divider: {
    borderColor: '#d1d5db', // gray-50
    width: '100%',
    margin: '8px 0',
    borderTop: '1px solid',
  },
  dropdownButton: {
    backgroundColor: '#60a5fa', // blue-50
    padding: '8px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer',
  },
});

2. 在组件中应用样式

将定义好的样式分别绑定到父容器和子元素上：

<div {...stylex.props(styles.groupContainer)}>
  <button {...stylex.props(styles.callButton)}>Call</button>
  <hr {...stylex.props(styles.divider)} />
  <button {...stylex.props(styles.dropdownButton)}>
    <i className='dropdown' />
  </button>
</div>

原理说明 #

StyleX的$nest允许在样式对象中编写嵌套的CSS选择器规则，这里通过&:hover $子元素样式名的写法，让StyleX生成父容器hover状态下匹配子元素的CSS规则，完全基于CSS原生的后代选择器实现，不需要任何JS状态或回调。

这种方式避开了StyleX默认的封装限制——因为嵌套规则属于父容器样式的内部定义，StyleX会正确处理类名的哈希映射，确保样式仅作用于目标元素。

内容的提问来源于stack exchange，提问作者Andrea Costanzo