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, }) );
footerOuter
から一発で定義元に飛べればとても便利なのですが、なにかいい方法はないでしょうか?
また、footerOuter
にカーソルをあわせたら定義されているstyleをvscodeで表示させることもできないでしょうか?
現在はfooterOuter:string
とかなり見当違いな表示がされています。
かなり困っています。
どんなことでもいいのでどうかお力を貸してください。
何卒宜しくお願いします。

あなたの回答
tips
プレビュー