Material UIにてComponentに一括でcssを設定したい。

Question

下記のように複数のPaper Componentがあります。

return(<>
    <Paper className={classes.paper}>AAA</Paper>
    <Paper className={classes.paper}>BBB</Paper>
    <Paper className={classes.paper}>CCC</Paper>
</>)

const useStyles = makeStyles((theme) =>
  createStyles({
    paper:{
      padding: theme.spacing(1),
      marginBottom: theme.spacing(3)
    },
  })
);

同じ内容のCSSを適用したいのですが、現状下記のように1つ1つのComponentにクラスを指定してCSSを適応しています。

一般的なCSSのように要素を指定して一括でCSSを指定できる方法はありますか？
動作しませんが、下記のようにCSSを指定したいと考えています。

return(<>
    <Paper >AAA</Paper>
    <Paper >BBB</Paper>
    <Paper >CCC</Paper>
</>)

const useStyles = makeStyles((theme) =>
  createStyles({
    Paper:{ // <- Paperを指定することでファイル内のPaperComponentは全てこのCSSが適応させるようにしたいです。
      padding: theme.spacing(1),
      marginBottom: theme.spacing(3)
    },
  })
);

Answer 1

こんにちは

以下を参考にするとよいかと思います。

• material-ui.com/customization/globals

上記の css で説明されている方法によるサンプルを試作してみました。

• **動作確認用サンプル： **codesandbox.io/s/q298205-8cqkf

参考になれば幸いです。

Comments

[yuki_90453]

いつも回答ありがとうございます。sandboxありがとうございます！
下記のroundedは独自のプロパティでしょうか？
rounded: {
borderRadius: "20%"
}

[jun68ykt]

どういたしまして

> 下記のroundedは独自のプロパティでしょうか？

rounded は、classes prop 経由でPaper にスタイルをあてるときの仕様

https://material-ui.com/api/paper/#css

に記載されているRule name　のうちのひとつで、説明に

Styles applied to the root element if square={false}.

とあるように、square prop が（デフォルトの）false であるときに、あてるスタイルを指定するためのプロパティになります。