reactjs - React - jss 嵌套的类似 Sass 的样式不起作用

Question

我有一个应用程序，我使用Material-UI v.3 作为 UI 框架。我有一个默认状态label，我想在将鼠标悬停在父元素上时显示。buttondisplay: none

我在这里制作了相关部分的简单代码框。jsx 代码如下所示：

 <div className={classes.volumeWrapper}>
    <VolumeUpIcon />
    <input
      accept="image/*"
      className={classes.fileInput}
      id="contained-button-file"
      multiple
      type="file"
    />
    <label htmlFor="contained-button-file">
      <Button
        variant="contained"
        component="span"
        className={classes.fileButton}
      >
        <AddIcon />
      </Button>
    </label>
  </div>

它的样式是这样的：

  fileInput: {
    display: "none"
  },
  volumeWrapper: {
    "& label": {
      display: "none"
    },
    "& :hover": {
      "& label": {
        display: "block"
      }
    }
  }

为什么这不起作用，我在这里做错了什么？