如何在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

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