css - 如何使用 material-ui 为复杂选择器引用另一个样式类

Question

像 styled-components you were able to reference the generated classes of other components像这样:

const Header = styled.header`
  font-weight: bold;
  display: flex;
`

const CloseButton = styled.button`
   padding: 0;
   border-width: 0;

   &:before {
     content: "x";
   }

   ${Header} > & {
     margin-left: auto;
   }
`

Material-UI 有 styled在此和 makeStyles 上设计的功能函数(在某些方面更胜一筹)，但我无法弄清楚如何在这里实现类似的效果并以更复杂的方式组合类选择器。该主题的文档非常稀少，他们只是说您可以使用 styled作为主要的替代品，但它的实际 api 是一个对象，在这种情况下这种事情是不可能的。
那么你如何做更复杂的选择器呢？

Answer 1

MUI 使用 CSS-in-JS
使用 $ruleName至 reference a local rule name同内makeStyles样式表。

const useStyles = makeStyles({
  Header: {
    fontWeight: "bold",
    display: "flex"
  },
  CloseButton: {
    padding: 0,
    borderWidth: 0,

    "&:before": {
      content: "'x'"
    },

    "$Header > &": { // <-- pay attention to usage of $
      marginLeft: "auto"
    }
  }
});

以下是您的 CSS看起来像: