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

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

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

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

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

Q&A

解決済

1回答

1777閲覧

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

Romay

総合スコア40

Material-UI

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

UI

UIはUser Interfaceの略であり、人間がコンピュータとやりとりをするためのシステムです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

React.js

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

CSSフレームワーク

CSSフレームワークは、Webページのスタイルを指定する言語であるCSSを容易に構築するためのツールです。ツイッター社が開発した「Bootstrap」や段組レイアウトが可能な「Foundation」など様々なCSSフレームワークがあります。

0グッド

0クリップ

投稿2021/08/01 11:45

編集2021/08/01 16:33

前提・実現したいこと

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

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

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

themeTemplate.tsx

React

1import * as React from "react" 2import { createMuiTheme } from "@material-ui/core/styles" 3import { ThemeProvider } from "@material-ui/styles" 4 5const theme = createMuiTheme({ 6 palette: { 7 primary: { 8 main: "#ffcccb", //後ほどにここは変数にする 9 }, 10 }, 11}) 12 13type Props = { 14 children: React.ReactNode 15} 16 17const ThemeTemplate: React.FC<Props> = ({ children }: Props) => { 18 return ( 19 <ThemeProvider theme={theme}> 20 <CssBaseline /> 21 {children} 22 </ThemeProvider> 23 ) 24} 25 26export default ThemeTemplate 27

index.tsx

React

1import { 2 makeStyles, 3 createStyles, 4 Theme, 5 withStyles, 6 useTheme, 7 WithStyles, 8} from "@material-ui/core/styles" 9import ThemeTemplate from "../../layouts/ThemeTemplate" 10 11(省略) 12 13const useStyles = makeStyles((theme: Theme) => 14 createStyles({ 15 button: { 16 backgroundColor: theme.palette.primary.main, //これが違う? 17 }, 18 }) 19) 20 21 22const hogehoge: React.FC<Props> = (props: Props) => { 23const classes = useStyles() 24const theme = useTheme() 25 26return ( 27 <ThemeTemplate> 28 <Button color="primary" > 29これは色が反映される 30 </Button> 31 32 <Button className={classes.button}> 33これは反映されずMaterial UIのデフォルトのcolorになる 34 </Button> 35 36 </ThemeTemplate> 37 ) 38} 39 40

試したこと

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

hogehoge コンポーネント内に

const classes = useStyles()

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

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

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

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

投稿2021/08/01 14:10

anozon

総合スコア662

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Romay

2021/08/01 16:08

ご回答ありがとうございます! const classes = useStyles()も書いていました。 ```children: React.ReactNode```について初めて知りました。ありがとうございます。 ```main:red```のところは誤解を生むような表現ですみません。。本来はhex codeで#FFFFFFのように色を記述しています。
Romay

2021/08/01 16:33

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

2021/08/02 00:23

> 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

2021/08/02 00:30

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

2021/08/05 14:47

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

2021/08/05 14:54

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

2021/08/05 15:34

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問