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

Question

如果有人问和回答这个问题，我们通常会道歉...

我有一个样式表：

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

...我这样调用：

const useStyles = makeStyles(kanbanStyles);

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

const classes = useStyles()

到目前为止，还不错。我希望能够做的是将道具传递给 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

向@RyanCogswell 提供答案，但问题是，如果您要为样式使用函数，为了处理动态道具，您必须在引用该样式的任何地方使用一个函数。所以这会中断：

  wrapper: {
    '& $name': {
      color: (props) => (props.color ? props.color : 'blue')
    }
  },
  name: {
    color: 'green'
  }

...但这会起作用：

  wrapper: {
    '& $name': {
      color: (props) => (props.color ? props.color : 'blue')
    }
  },
  name: {
    color: (props) => 'green'
  }

注意 (props) => 'green'.

这是一个可能不会很快得到解决的错误： https://github.com/mui-org/material-ui/issues/13672#issuecomment-541118923

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

How to pass props to to material-ui styles in a sub-selector

reactjs

material-ui

jss