質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

受付中

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

Hinoarashi.
Hinoarashi.

総合スコア76

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0回答

0リアクション

0クリップ

108閲覧

投稿2022/08/04 07:16

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で表示させることもできないでしょうか?

url

現在はfooterOuter:stringとかなり見当違いな表示がされています。
かなり困っています。

どんなことでもいいのでどうかお力を貸してください。
何卒宜しくお願いします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。