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样式

1 个答案: