diff options
author | Kristóf Marussy <kristof@marussy.com> | 2021-12-22 22:54:38 +0100 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2021-12-22 22:54:38 +0100 |
commit | 9a2b4af1aa07eb4760692afe040dab9267fe7987 (patch) | |
tree | 041b491dd5dfd3b49d79aa929ed32c91dee73edd /packages/renderer/src/index.tsx | |
parent | build: Simplify project structure (diff) | |
download | sophie-9a2b4af1aa07eb4760692afe040dab9267fe7987.tar.gz sophie-9a2b4af1aa07eb4760692afe040dab9267fe7987.tar.zst sophie-9a2b4af1aa07eb4760692afe040dab9267fe7987.zip |
feat: Add mui
Diffstat (limited to 'packages/renderer/src/index.tsx')
-rw-r--r-- | packages/renderer/src/index.tsx | 35 |
1 files changed, 29 insertions, 6 deletions
diff --git a/packages/renderer/src/index.tsx b/packages/renderer/src/index.tsx index 21ad152..67bdf93 100644 --- a/packages/renderer/src/index.tsx +++ b/packages/renderer/src/index.tsx | |||
@@ -1,10 +1,33 @@ | |||
1 | import '@fontsource/roboto/300.css'; | ||
2 | import '@fontsource/roboto/400.css'; | ||
3 | import '@fontsource/roboto/500.css'; | ||
4 | import '@fontsource/roboto/700.css'; | ||
5 | import Button from "@mui/material/Button"; | ||
6 | import CssBaseline from "@mui/material/CssBaseline"; | ||
7 | import { | ||
8 | unstable_createMuiStrictModeTheme as createTheme, | ||
9 | ThemeProvider, | ||
10 | } from '@mui/material/styles'; | ||
1 | import React from 'react'; | 11 | import React from 'react'; |
2 | import { render } from 'react-dom'; | 12 | import { render } from 'react-dom'; |
3 | 13 | ||
4 | const app = ( | 14 | const theme = createTheme({ |
5 | <React.StrictMode> | 15 | palette: { |
6 | <h1>Hello Sophie!</h1> | 16 | mode: 'dark', |
7 | </React.StrictMode> | 17 | }, |
8 | ); | 18 | }); |
9 | 19 | ||
10 | render(app, document.getElementById('app')); | 20 | function App() { |
21 | return ( | ||
22 | <React.StrictMode> | ||
23 | <ThemeProvider theme={theme}> | ||
24 | <CssBaseline enableColorScheme /> | ||
25 | <Button variant="contained"> | ||
26 | Hello Sophie! | ||
27 | </Button> | ||
28 | </ThemeProvider> | ||
29 | </React.StrictMode> | ||
30 | ); | ||
31 | } | ||
32 | |||
33 | render(<App />, document.querySelector('#app')); | ||