質問編集履歴
4
試したことを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -178,6 +178,14 @@
|
|
|
178
178
|
|
|
179
179
|
|
|
180
180
|
|
|
181
|
+
```const useStyles = makeStyles((theme: ThemeTemplate) =>```としてみたところエラーになりました。
|
|
182
|
+
|
|
183
|
+
ふと思ったのですが、```theme:Theme```で読み込んでいる元の```Theme```はMaterial UIのデフォルトのもの(```import {theme} from @material-ui```)から読み込んでいるので、```themeTemplate.tsx```で設定したものは反映されないのでは？？と思いました。。。
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
181
189
|
### 補足情報（FW/ツールのバージョンなど）
|
|
182
190
|
|
|
183
191
|
|
3
補足を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -182,4 +182,6 @@
|
|
|
182
182
|
|
|
183
183
|
|
|
184
184
|
|
|
185
|
-
|
|
185
|
+
また、```className="button"```で当てた箇所は、"#3f51b5"になっており、これは以下のMaterialUIのpalette→primary→mainのhex codeと一致します。そのため、MaterialUIのデフォルトの色が指定はできているものの、アプリケーション内の```themeTemplate.tsx```で指定した内容が無視されているということになります。
|
|
186
|
+
|
|
187
|
+
[Material UIのDefault Theme](https://material-ui.com/customization/default-theme/)
|
2
より詳細に記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
primary: {
|
|
38
38
|
|
|
39
|
-
main: "
|
|
39
|
+
main: "#ffcccb", //後ほどにここは変数にする
|
|
40
40
|
|
|
41
41
|
},
|
|
42
42
|
|
|
@@ -128,6 +128,12 @@
|
|
|
128
128
|
|
|
129
129
|
const hogehoge: React.FC<Props> = (props: Props) => {
|
|
130
130
|
|
|
131
|
+
const classes = useStyles()
|
|
132
|
+
|
|
133
|
+
const theme = useTheme()
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
|
|
131
137
|
return (
|
|
132
138
|
|
|
133
139
|
<ThemeTemplate>
|
1
themeTemplate.tsxを補足
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -43,6 +43,38 @@
|
|
|
43
43
|
},
|
|
44
44
|
|
|
45
45
|
})
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
type Props = {
|
|
50
|
+
|
|
51
|
+
children: React.ReactNode
|
|
52
|
+
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
const ThemeTemplate: React.FC<Props> = ({ children }: Props) => {
|
|
58
|
+
|
|
59
|
+
return (
|
|
60
|
+
|
|
61
|
+
<ThemeProvider theme={theme}>
|
|
62
|
+
|
|
63
|
+
<CssBaseline />
|
|
64
|
+
|
|
65
|
+
{children}
|
|
66
|
+
|
|
67
|
+
</ThemeProvider>
|
|
68
|
+
|
|
69
|
+
)
|
|
70
|
+
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
export default ThemeTemplate
|
|
76
|
+
|
|
77
|
+
|
|
46
78
|
|
|
47
79
|
```
|
|
48
80
|
|