matrialUI スタイルの表記 '& > *' が解読できない

materialUIを使っています。

https://material-ui.com/components/buttons/
サンプルをいくつか見ているのですが、以下のような表記がrootに設定されています。

'&>*'の部分がどういう意味なのかがわかりません。
多分、なんらかの親要素の元の子要素をワイルドカードで全て選択という意味かとは推量しましたが、
公式に解説しているところはありますでしょうか。

検索する際にどのワードをいれたらよいのかも分からず、数週間がすぎてしまいました・・・

js
1const useStyles = makeStyles((theme) => ({
2  root: {
3    '& > *': {
4      margin: theme.spacing(1),
5    },
6  },
7}));

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

ドキュメントを見てみましたが、

You can nest selectors to target elements inside the current class or component.

とのことです。

投稿2020/06/17 07:17

総合スコア36158

2020/06/17 07:25

ありがとうございます！ CSSの記法かとおもっておりましたが、materialUI特有のものだったのですね。公式の記載にも気づかず、、大変に助かりました。

2020/06/17 07:39

SCSSなどでも使う記法ですね。

2020/06/17 07:45

SCSS調べてみました。ご指摘の通りですね。こんな便利に要素が選択できるようになっていたとは・・・大変助かりました！！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

関連した質問