使用sx道具旋转背景图像

Question

我试图使用MU5 'sx‘支持语法旋转背景图像，我不知道如何做，似乎找不到答案。我只想旋转背景图像，但不是网格的任何子组件：

 <Grid container direction='column'sx={{
                    backgroundImage: `url(${Image})`, transform: 'rotate(90deg)', backgroundSize: '100% 100%',
                    backgroundPosition: 'top left', backgroundRepeat: 'no-repeat',
                }}>

  </Grid>

Answer 1

没有background-image转换，但是如果不想旋转任何子元素，可以使用伪元素::before，添加背景图像并旋转，如下所示：

<Box
      sx={{
        width: 300,
        height: 300,
        position: "relative",
        border: "dashed 3px royalBlue",
        overflow:'hidden',
        ":before": {
          content: "''",
          width: "100%",
          height: "100%",
          position: "absolute",
          zIndex: "-1",
          transform: "rotate(30deg)",
          backgroundImage:
            "url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScz4ccW2Mc2m5qU4rRicqn5lk7EN4qxsjLitrENxkiYPo7SC1hAkFd4BbTgxJhEov9iTc&usqp=CAU)"
        }
      }}
    >
      <Box sx={{ p: "10px", backgroundColor: "orange", color: "white" }}>
        Child 1 dddd
      </Box>
      <Box sx={{ p: "10px", backgroundColor: "orange", color: "white" }}>
        Child 2 dddd
      </Box>
      <Box sx={{ p: "10px", backgroundColor: "orange", color: "white" }}>
        Child 3 dddd
      </Box>
    </Box>