React结合Material UI：withStyles HOC复杂CSS选择器转换求助

我明白你的困扰——在用Material UI的withStyles HOC时，处理相邻元素选择器这类复杂CSS规则确实容易踩坑，因为Material UI会自动转换类名，直接写原始类名是找不到对应的元素的。

问题根源 #

你之前的代码里，cardInputRadio:checked+ &这种写法没有正确引用Material UI生成的类名，而且选择器的语法也有问题。Material UI的样式系统允许用$[样式键名]来引用同一个样式对象里的其他类，这样就能正确映射到它生成的哈希类名。

正确的样式写法 #

下面是调整后的代码，完美实现你想要的「单选框选中后改变相邻卡片样式」的效果：

const styles = {
  label: { width: "100%" },
  cardInputRadio: {
    display: "none",
    // 使用$cardInput引用样式对象里的cardInput类，确保类名正确转换
    '&:checked + $cardInput': {
      boxShadow: '0 0 1px 1px #2e0071', // 这就是你要的阴影效果
      color: 'green',
      display: "block"
    }
  },
  cardInput: {
    margin: "10px",
    '&:hover': {
      cursor: 'pointer',
    }
  },
  container: { flexGrow: 1 },
  card: { minWidth: 100, width: 300, display: "inline-block" },
  title: { fontSize: 14 },
};

export default withStyles(styles)(MyComponent);

关键注意点 #

• 类名引用方式：用$cardInput替代硬编码的.cardInput，这样Material UI会自动把它转换成对应的唯一类名，避免选择器失效。
• DOM结构要求：你的单选框元素和卡片元素必须是直接相邻的兄弟元素，比如：

// 正确的DOM结构示例
<div>
  <input type="radio" className={classes.cardInputRadio} name="cardGroup" />
  <div className={classes.cardInput}>
    {/* 卡片内容，比如你的card组件 */}
    <Card className={classes.card}>
      <CardHeader title="Card Title" className={classes.title} />
      {/* 其他内容 */}
    </Card>
  </div>
</div>

如果中间隔了其他元素，+相邻选择器就无法生效。

• 样式定义位置：把选中后的样式写在cardInputRadio的样式块里更直观，因为是单选框的状态变化触发了卡片样式的改变。

这样调整后，就能完全实现你原CSS代码的效果啦。

内容的提问来源于stack exchange，提问作者DJAMEL DAHMANE