質問編集履歴
4
試したことを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -88,6 +88,10 @@
|
|
|
88
88
|
|
|
89
89
|
関連する記事などが見つけられませんでした。
|
|
90
90
|
|
|
91
|
+
```const useStyles = makeStyles((theme: ThemeTemplate) =>```としてみたところエラーになりました。
|
|
92
|
+
ふと思ったのですが、```theme:Theme```で読み込んでいる元の```Theme```はMaterial UIのデフォルトのもの(```import {theme} from @material-ui```)から読み込んでいるので、```themeTemplate.tsx```で設定したものは反映されないのでは？？と思いました。。。
|
|
93
|
+
|
|
94
|
+
|
|
91
95
|
### 補足情報（FW/ツールのバージョンなど）
|
|
92
96
|
|
|
93
97
|
また、```className="button"```で当てた箇所は、"#3f51b5"になっており、これは以下のMaterialUIのpalette→primary→mainのhex codeと一致します。そのため、MaterialUIのデフォルトの色が指定はできているものの、アプリケーション内の```themeTemplate.tsx```で指定した内容が無視されているということになります。
|
3
補足を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -90,4 +90,5 @@
|
|
|
90
90
|
|
|
91
91
|
### 補足情報（FW/ツールのバージョンなど）
|
|
92
92
|
|
|
93
|
-
|
|
93
|
+
また、```className="button"```で当てた箇所は、"#3f51b5"になっており、これは以下のMaterialUIのpalette→primary→mainのhex codeと一致します。そのため、MaterialUIのデフォルトの色が指定はできているものの、アプリケーション内の```themeTemplate.tsx```で指定した内容が無視されているということになります。
|
|
94
|
+
[Material UIのDefault Theme](https://material-ui.com/customization/default-theme/)
|
2
より詳細に記載
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
const theme = createMuiTheme({
|
|
18
18
|
palette: {
|
|
19
19
|
primary: {
|
|
20
|
-
main: "
|
|
20
|
+
main: "#ffcccb", //後ほどにここは変数にする
|
|
21
21
|
},
|
|
22
22
|
},
|
|
23
23
|
})
|
|
@@ -63,6 +63,9 @@
|
|
|
63
63
|
|
|
64
64
|
|
|
65
65
|
const hogehoge: React.FC<Props> = (props: Props) => {
|
|
66
|
+
const classes = useStyles()
|
|
67
|
+
const theme = useTheme()
|
|
68
|
+
|
|
66
69
|
return (
|
|
67
70
|
<ThemeTemplate>
|
|
68
71
|
<Button color="primary" >
|
1
themeTemplate.tsxを補足
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -21,6 +21,22 @@
|
|
|
21
21
|
},
|
|
22
22
|
},
|
|
23
23
|
})
|
|
24
|
+
|
|
25
|
+
type Props = {
|
|
26
|
+
children: React.ReactNode
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
const ThemeTemplate: React.FC<Props> = ({ children }: Props) => {
|
|
30
|
+
return (
|
|
31
|
+
<ThemeProvider theme={theme}>
|
|
32
|
+
<CssBaseline />
|
|
33
|
+
{children}
|
|
34
|
+
</ThemeProvider>
|
|
35
|
+
)
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export default ThemeTemplate
|
|
39
|
+
|
|
24
40
|
```
|
|
25
41
|
|
|
26
42
|
index.tsx
|