импорт стилей с помощью 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;