如何在子选择器中将道具传递给Material-ui样式

Question

通常的道歉，如果要求和回答此问题...

我有一个样式表：

const styles = createStyles({
    root: {background: 'blue', color: 'red'},
    highlightedWrapper: {
        '& $root': {
           background: 'green',
           color: 'black'
        }
    }
})

...我这样调用：

const useStyles = makeStyles(kanbanStyles);

...然后在我的组件中像这样引用：

const classes = useStyles()

到目前为止，很好。我想做的就是将props传递到useStyles()，然后在样式表中引用它。所以这有效：

const classes = useStyles({color: 'yellow'})

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

...但是我无法弄清楚如何在子选择器内部调用该函数。就像，这对我不起作用：

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

我已经尝试了上述语法的各种排列，将其放在hightlightedWrapper:之后，然后放在'& $root':之后，但是没有任何效果。

帮助？

谢谢！

Answer 1

此作品：

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

使用方式：

  const classes = useStyles({ color: "red" });