如何在Material UI React的styled组件中向样式传递props参数

实现动态背景图的修改步骤 #

1. 修改样式文件（makeStyles部分） #

makeStyles支持接收组件传入的动态参数，你可以将需要动态取值的样式项改写成函数形式，接收参数后返回对应的样式值：

import { makeStyles } from '@material-ui/styles';

export default makeStyles(theme => ({
    AppBar: (styleProps) => ({
        background: `url("${styleProps.image}")`,
        objectFit: 'cover',
        color:'black',
        height:'300px'
    }),
    Text:{
        backgroundColor:'rgba(0,0,0,0.4)',
        padding:'10px',
        color:'white',
        position: 'absolute',
        top:'10px',
        left:'10px'
    },
    Button:{
        backgroundColor:'rgba(0,0,0,0.1)',
        padding:'10px'
    },
}));

注意：不要用你示例里单引号嵌套反引号的错误写法，直接用反引号包裹整个背景值字符串，用${}作为变量插值的占位符即可。

2. 修改组件代码，调用useStyles时传入动态参数 #

在组件内调用useStyles生成className的时候，把组件接收到的props.image作为入参传给useStyles即可：

const CategoryDialog = (props) => {
  // 传入动态图片参数到样式中
  const classes = useStyles({ image: props.image });

  console.log(props);

  return (
    <div>
      <Dialog
        fullScreen
        open={props.dilaogOpenProp}
        TransitionComponent={Transition}
      >
        <AppBar className={classes.AppBar} sx={{ position: "relative" }}>
          <Toolbar>
            {/* <IconButton
              edge="start"
              color="inherit"
              aria-label="close"
              onClick={props.onDialogClose}
            >
              <CloseIcon />
            </IconButton> */}
            <Typography
              
              sx={{ ml: 2, flex: 1 }}
              variant="h2"
              component="div"
            >
              <span className={classes.Text}>{props.showCategoryMarbleOnDialog?.qualityName}</span>
              
            </Typography>
            <Button
              autoFocus
              color="error"
              variant='contained'
              onClick={props.onDialogClose}
            >
              Back
            </Button>
          </Toolbar>
        </AppBar>
        <List></List>
      </Dialog>
    </div>
  );
};

export default CategoryDialog;

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