在使用 makeStyles 的材质 ui 中，是否可以编写仅在元素具有两个类时才适用的 css 规则？

Question

我知道我可以在 CSS 中做到这一点。

.makeStyles-mainNavWrapper-67.sticky{
  position: fixed;
  top: 0px;
  opacity: 1;
  transition: opacity 1s ease;
  padding: 10px;
}

我想知道是否可以在 Material-UI 中执行此操作，这样我就不必拥有两个单独的样式表（一个用于 MaterialUI ReactApp，另一个在 HTML 标记中链接）。

const Header = (props) => {
  const useStyles = makeStyles(theme => ({
    mainNav: {
      zIndex: '3',
      color: 'white',
      textAlign: 'right',
      marginRight: '10%'
    },
    mainNavWrapper: {
      paddingTop: '2%',
      background: 'rgba(0,0,0,0.8)'
    },
    mainNavWrapper.sticky: {
       I know this does not work. Is it possible?
    },

我尝试将 MaterialUI 中的两个类串在一起，但出现错误。

Answer 1

我想我可能已经找到了（广泛的橡皮鸭）

https://github.com/cssinjs/jss-nested

const styles = {
  container: {
    padding: 20,
    '&:hover': {
      background: 'blue'
    },
    // Add a global .clear class to the container.
    '&.clear': {
      clear: 'both'
    },
    // Reference a global .button scoped to the container.
    '& .button': {
      background: 'red'
    },
    // Use multiple container refs in one selector
    '&.selected, &.active': {
      border: '1px solid red'
    }
  }
}

符合：

.container-3775999496 {
  padding: 20px;
}
.container-3775999496:hover {
  background: blue;
}
.container-3775999496.clear {
  clear: both;
}
.container-3775999496 .button {
  background: red;
}
.container-3775999496.selected, .container-3775999496.active {
  border: 1px solid red;
}

我的其他一些代码已损坏，因此需要一些时间来验证这一点。