在JSS中是否可以通过子元素访问并选中对应的父元素？

JSS子元素关联父元素样式实现方案 #

首先明确：CSS原生本身不支持「通过子元素直接选中父元素修改样式」的父选择器语法，JSS作为CSS-in-JS方案，也无法突破CSS的原生限制实现纯CSS层面的子选父逻辑，你可以根据具体需求选择以下几种可行的实现方案：

方案1：以父元素为核心嵌套子元素规则（最常用，兼容性最好） #

适用于需要根据父元素的状态、类名控制子元素样式的场景，直接在父元素的样式规则中嵌套子元素选择器即可：

import { createUseStyles } from 'react-jss'

const useStyles = createUseStyles({
  parent: {
    width: 200,
    padding: 20,
    backgroundColor: '#eee',
    // 父元素hover状态下修改子元素样式
    '&:hover': {
      backgroundColor: '#ddd',
      '& $child': {
        color: 'red'
      }
    },
    // 父元素带active类时修改子元素样式
    '&.is-active': {
      border: '1px solid blue',
      '& $child': {
        fontWeight: 'bold'
      }
    }
  },
  child: {
    fontSize: 14,
    color: '#333'
  }
})

function Demo() {
  const classes = useStyles()
  return (
    <div className={classes.parent}>
      this is parent
      <div className={classes.child}>this is child</div>
    </div>
  )
}

方案2：使用CSS原生:has()伪类（支持子元素触发父元素样式变化） #

如果你的业务不需要兼容极低版本浏览器，可以用现在主流浏览器都支持的:has()伪类，实现子元素状态变化时修改父元素样式：

const useStyles = createUseStyles({
  parent: {
    width: 200,
    padding: 20,
    backgroundColor: '#eee',
    // 子元素被hover时修改父元素样式
    '&:has($child:hover)': {
      backgroundColor: 'pink'
    },
    // 子元素带active类时修改父元素样式
    '&:has($child.active)': {
      border: '2px solid green'
    }
  },
  child: {
    fontSize: 14,
    color: '#333'
  }
})

注意：:has()选择器兼容Safari 15.4+、Chrome 105+、Firefox 121+版本，低版本浏览器场景不建议使用

方案3：配合JS逻辑实现（全版本兼容，适配复杂交互） #

如果需要兼容低版本浏览器，或者交互逻辑比较复杂，可以直接通过JS监听子元素状态，动态给父元素添加类名实现样式控制：

import { useState } from 'react'
import { createUseStyles } from 'react-jss'

const useStyles = createUseStyles({
  parent: {
    width: 200,
    padding: 20,
    backgroundColor: '#eee',
    '&.child-hovered': {
      backgroundColor: 'pink'
    }
  },
  child: {
    fontSize: 14,
    color: '#333'
  }
})

function Demo() {
  const classes = useStyles()
  const [isChildHovered, setIsChildHovered] = useState(false)
  return (
    <div className={`${classes.parent} ${isChildHovered ? 'child-hovered' : ''}`}>
      this is parent
      <div 
        className={classes.child}
        onMouseEnter={() => setIsChildHovered(true)}
        onMouseLeave={() => setIsChildHovered(false)}
      >
        this is child
      </div>
    </div>
  )
}

内容的提问来源于stack exchange，提问作者Manu Panduu