Materila UIでthemeTemplateで設定した値がuseStyleで反映されない

Question

前提・実現したいこと

React(TypeScript)× Ruby on RailsでWebアプリケーションを開発しています。
やりたいこととして、各ユーザーごとにボタンや背景などの色を変えたい(例：ユーザーAには赤色、ユーザーBには青色など)です。
そこで、material UIのthemeTemplateのpaletteで色を一括管理し、ユーザーごとに変数で出し分けたいです。

しかし、useStyleでclassを設定したものが実際には反映されません。直接color="primary"とすると反映されます。

発生している問題・エラーメッセージ

themeTemplate.tsx

import * as React from "react"
import { createMuiTheme } from "@material-ui/core/styles"
import { ThemeProvider } from "@material-ui/styles"

const theme = createMuiTheme({
  palette: {
    primary: {
      main: "#ffcccb",   //後ほどにここは変数にする
    },
  },
})

type Props = {
  children: React.ReactNode
}

const ThemeTemplate: React.FC<Props> = ({ children }: Props) => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      {children}
    </ThemeProvider>
  )
}

export default ThemeTemplate

index.tsx

import {
  makeStyles,
  createStyles,
  Theme,
  withStyles,
  useTheme,
  WithStyles,
} from "@material-ui/core/styles"
import ThemeTemplate from "../../layouts/ThemeTemplate"

(省略)

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    button: {
      backgroundColor: theme.palette.primary.main,  //これが違う？
    },
  })
)


const hogehoge: React.FC<Props> = (props: Props) => {
const classes = useStyles()
const theme = useTheme()

return (
 <ThemeTemplate>
  <Button color="primary" > 
これは色が反映される
  </Button>

  <Button className={classes.button}> 
これは反映されずMaterial UIのデフォルトのcolorになる
  </Button>

  </ThemeTemplate>
  )
}
  

試したこと

関連する記事などが見つけられませんでした。

const useStyles = makeStyles((theme: ThemeTemplate) =>としてみたところエラーになりました。
ふと思ったのですが、theme:Themeで読み込んでいる元のThemeはMaterial UIのデフォルトのもの(import {theme} from @material-ui)から読み込んでいるので、themeTemplate.tsxで設定したものは反映されないのでは？？と思いました。。。

補足情報（FW/ツールのバージョンなど）

また、className="button"で当てた箇所は、"#3f51b5"になっており、これは以下のMaterialUIのpalette→primary→mainのhex codeと一致します。そのため、MaterialUIのデフォルトの色が指定はできているものの、アプリケーション内のthemeTemplate.tsxで指定した内容が無視されているということになります。
Material UIのDefault Theme

Answer 1

hogehoge コンポーネント内に

  const classes = useStyles()

が不足しているせいとかですか？

あと関係ないですが
React.FC<Props> にしている場合 children: React.ReactNode はなくても Type 付与してくれます。

      main: 'red' //後ほどにここは変数にする

ここについても hex code でないので実行時にエラーが発生すると思います

Comments

[Romay]

ご回答ありがとうございます！
const classes = useStyles()も書いていました。
```children: React.ReactNode```について初めて知りました。ありがとうございます。

```main:red```のところは誤解を生むような表現ですみません。。本来はhex codeで#FFFFFFのように色を記述しています。

[Romay]

"試したこと"と"補足"を追加してみましたのでご確認いただけますと嬉しいです。

[anozon]

> const useStyles = makeStyles((theme: ThemeTemplate) =>としてみたところエラーになりました。
ThemeTemplate は定義した Component であり typeof ThemeTemplate でも Theme とは別物です

makeStyles((theme) => の theme の型は指定しなくてもついている状態だと思います。

1つコンポーネントのwrap が足りないようです
<ThemeProvider> を記述するコンポーネント内では makeStyles で theme をとってこれないのと同じように
<ThemeTemplate> を記述している部分も context をまだとってこれない位置になります

デモを作りました https://codesandbox.io/s/makestyles-material-ui-2-75xzl?file=/src/index.js

[anozon]

https://ja.reactjs.org/docs/context.html#dynamic-context

ThemeTemplate が ThemeProvider を wrap しているので
<ThemeTemplate> 内に記述したコンポーネント"の" 内側でないと hooks などで Provider の Context はとってこれません

[anozon]

私がしたこの質問への最初の回答の Hogehoge 内という指摘は間違えていましたすみません。

[Romay]

ご回答ありがとうございます！返信遅くなり申し訳ありません。
デモリンク確認させていただきました。
現状、初心者なものでちゃんと細かくコンポーネントに分けず、return内に全部書いてしまっているのですが、その状態だと <ThemeTemplate>にWrapされているため、色が反映されないという理解であっていますでしょうか。
デモのButtonWrapのように、コンポーネントをreturnの外に切り出して、returnの中でButtonWrapのコンポーネントを呼び出すことで、色が反映されるという理解で合っていますでしょうか。

[anozon]

1以上 <Template> の層より下に１つ以上であれば Wrap されていれば大丈夫だと思います。
ThemeTemplate の内側を大きく1つコンポーネント Wrap するのでも大丈夫です。

[Romay]

ありがとうございます！ThemeTemplateの中にベタがきしていたものをちゃんとコンポーネントごとに切り出して書いてみたら、色反映されました！！ありがとうございます！！　
この質問ともう一つの質問の方をベストアンサーにさせていただければと思います。ご丁寧にお教えいただき本当にありがとうございました！！