如何在 jss 中引用子组件中的规则名称

Question

我正在使用Material-UI。由于它支持使用 JSS 的 CSS 样式，我正在努力访问不同组件中的规则名称。如您所见，MyComponent 使用AppBar 组件，我需要访问AppBar 组件中的规则名称。但是，由于某种原因，我无法访问其中的规则名称。

MyComponent.js

<div id="navigation-pills">
  <div className={classes.root}>
    <AppBar position="static" color="default">
      <Tabs
        ...
      >
        ...
      </Tabs>
    </AppBar>
  </div>
</div>

styles.js

const styles = theme => ({
  ...
  root: {
    flexGrow: 1,
    width: "100%",
    backgroundColor: theme.palette.background.paper,
    "& $flexContainer": {
      display: "none"
    }
  },
  ...
});

JSS API 说我可以使用$ 访问子规则名称，但由于某种原因它不起作用。

L

如下图所示，我想在第 7 行访问 flexContainer 规则名称。

Answer 1

它只能引用来自同一个样式表（样式对象）的规则。在您的代码中我无法分辨，因为您将其替换为“...”。