【VSCode】クラスから定義元のstyleにF12もしくはcommand + 左クリックでジャンプしたい

Material UIのmakeStylesを使ってstyleをすべて書いています。
クラス単位かつTypesctiptでスタイルをかけるので重宝してるのですが、不便な点があります。

それはF12もしくはcommand + 左クリックで定義元にジャンプできないことです。
例えば<article className={classes.footerOuter}>のfooterOuterにカーソルをあて、F12を押したとします。

イメージ説明

すると画像のように「定義はみつかりません」と表示されます。
Material UIの公式に問い合わせてみても、これはVSCodeの問題と回答がきました。

https://github.com/mui/material-ui/issues/33775#issuecomment-1204699972

classesでジャンプするとfooterStyleに飛び、footerStyleでジャンプするとstyleを定義しているファイルへ飛べます。

//footerStyle

import {
  createStyles,
  createTheme,
  makeStyles,
  Theme,
} from "@material-ui/core";
import { CreateCSSProperties } from "@material-ui/core/styles/withStyles";
import { flexCenter, flexColumnEnd, paddingTop10 } from "./Common";

export const footerOuter: CreateCSSProperties<{}> = {
  marginTop: "5%",
  background: "linear-gradient(to right bottom, #63bcfa, #1580cc)",
  padding: "4%",
};
export const footerInner: CreateCSSProperties<{}> = {
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-around",
};
export const mainContentOuter: CreateCSSProperties<{}> = {
  display: "flex",
  flexDirection: "column",
  color: "#FFFFFF",
};
export const mainContentTitle: CreateCSSProperties<{}> = { fontSize: "16px" };
export const mainContentText: CreateCSSProperties<{}> = {
  color: "#FFFFFF",
  fontSize: "13px",
  paddingTop: "15%",
  cursor: "pointer",
  userSelect: "none",
};
export const copywriteText: CreateCSSProperties<{}> = {
  fontSize: "8px",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "end",
  paddingTop: "1%",
};
export const textArea: CreateCSSProperties<{}> = {
  display: "block",
  borderRadius: "5px",
  height: "80px",
  width: "80%",
  background: "#F5F5F5",
  outline: "none",
  fontSize: "14px",
  padding: "8px 12px",
  resize: "none",
};
export const textAreaAside: CreateCSSProperties<{}> = {
  fontSize: "12px",
  color: "#FFFFFF",
  display: "flex",
  justifyContent: "center",
  paddingTop: "5%",
};
export const submitOuter: CreateCSSProperties<{}> = {
  height: "50px",
  width: "100%",
  border: "solid 1px #FFFFFF",
  borderRadius: "10px",
  marginTop: "5%",
};
export const submitText: CreateCSSProperties<{}> = {
  height: "100%",
  color: "#FFFFFF",
  fontSize: "18px",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
};

export const footerStyle = makeStyles((theme: Theme) =>
  createStyles({
    footerOuter: footerOuter,
    footerInner: footerInner,
    mainContentOuter: mainContentOuter,
    mainContentTitle: mainContentTitle,
    mainContentText: mainContentText,
    flexColumnEnd: flexColumnEnd,
    flexCenter: flexCenter,
    paddingTop10: paddingTop10,
    textArea: textArea,
    textAreaAside: textAreaAside,
    submitOuter: submitOuter,
    submitText: submitText,
    copywriteText: copywriteText,
  })
);