使用JSS导入样式在React应用程序中不起作用

Question

我正在尝试使用以JSS编写的局部样式之一来使用全局样式。正如您在下面看到的全局样式一样，我导出了每种样式，并尝试将其导入以在我的一种本地样式中使用它。

就像您看到底部的图像一样，我将鼠标悬停在root上，它在root上显示了globalStyles.tsx的声明。但是，globalStyles.tsx上的声明根本不适用。仅适用于styles.tsx的本地样式声明。

导入时是否错过了任何其他步骤？请注意，它不会给我任何编译时错误。

src / shared / styles / globalStyles.tsx

import { Theme } from "@material-ui/core/styles/createMuiTheme";

const drawerWidth = 245;
const regionBarHeight = 79;
const appBarHeight = 70;
const drawerHeight = regionBarHeight + appBarHeight;
const AdWidth = 200;

const root = (theme: Theme) => ({
  position: "relative",
  color: "black",
  backgroundColor: "white",
  width: `calc(100% - ${drawerWidth}px)`,
  paddingRight: `${AdWidth}px`,
  top: `${drawerHeight}px`,
  left: `${drawerWidth}px`,
  [theme.breakpoints.down("sm")]: {
    width: "100%",
    left: 0
  },
  [theme.breakpoints.down("xs")]: {
    top: `${appBarHeight}px`,
    paddingRight: 0,
    left: 0
  }
});

const bodyContainer = (theme: Theme) => ({
  bodyContainer: {
    color: "black",
    backgroundColor: "white",
    [theme.breakpoints.down("sm")]: {},
    [theme.breakpoints.down("xs")]: {
      width: "100%",
      marginRight: 0
    }
  }
});

const MainView_GridContainer = (theme: Theme) => ({
  flexGrow: 1
});

const MainView__paper = (theme: Theme) => ({
  padding: theme.spacing.unit * 2,
  textAlign: "center",
  color: theme.palette.text.secondary,
  boxShadow: "none"
});

export { root, bodyContainer, MainView_GridContainer, MainView__paper };

src / views / MainView / styles.tsx

import {
  root,
  bodyContainer,
  MainView_GridContainer,
  MainView__paper
} from "shared/styles/globalStyles";

const styles = () => ({
  root: {
    ...root
  },
  bodyContainer: {
    ...bodyContainer
  },
  MainView_GridContainer: {
    ...MainView_GridContainer
  },
  MainView__paper: {
    ...MainView__paper
  }
});

export default styles;