如何在Material-UI样式的子选择器中传递Props？

我明白你遇到的困扰了——在Material-UI的嵌套样式选择器里直接写函数获取props确实行不通，因为框架只会处理顶层样式规则的函数，嵌套层级里的函数不会被自动调用并传入props。下面给你两种可行的解决方案：

方案一：将包含嵌套选择器的规则定义为函数 #

把highlightedWrapper整个变成接收props的函数，这样内部的& $root选择器就能顺利访问到props了：

const styles = createStyles({ 
  root: (props) => ({
    background: 'blue',
    color: props.color
  }), 
  highlightedWrapper: (props) => ({
    '& $root': { 
      background: 'green',
      color: props.color 
    }
  })
})

方案二：把整个样式定义为接收props的函数 #

另一种更简洁的方式是，直接把makeStyles的参数写成一个接收props的函数，这样所有样式规则（包括嵌套的）都能直接访问props：

const useStyles = makeStyles((props) => ({
  root: {
    background: 'blue',
    color: props.color
  },
  highlightedWrapper: {
    '& $root': {
      background: 'green',
      color: props.color
    }
  }
}));

为什么之前的写法无效？ #

Material-UI的样式处理逻辑是：只有当某个顶层样式键（比如root、highlightedWrapper）对应的值是函数时，才会在调用useStyles(props)时执行这个函数并传入props。而你之前在嵌套的& $root里写的color: (props) => props.color，框架不会识别这个函数，只会把它当作普通的样式值处理，自然就取不到正确的props了。

你的调用方式const classes = useStyles({color: 'yellow'})是完全正确的，上面两种方案都能正常接收这个props并应用到样式里。

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