@abhishekzambare/mui 0.0.17 → 0.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -14
- package/package.json +17 -17
package/README.md
CHANGED
|
@@ -1,32 +1,71 @@
|
|
|
1
1
|
# 1 use provider MUIThemeContextProvider and wrap it to your app element or any element you like to have theme
|
|
2
2
|
|
|
3
3
|
```js
|
|
4
|
+
import { StrictMode } from "react";
|
|
5
|
+
import { createRoot } from "react-dom/client";
|
|
6
|
+
import "./index.css";
|
|
7
|
+
import App from "./App.tsx";
|
|
4
8
|
import { MUIThemeContextProvider } from "@abhishekzambare/mui";
|
|
5
9
|
|
|
6
|
-
|
|
7
|
-
|
|
10
|
+
createRoot(document.getElementById("root")!).render(
|
|
11
|
+
<StrictMode>
|
|
8
12
|
<MUIThemeContextProvider>
|
|
9
|
-
<
|
|
10
|
-
<Footer />
|
|
13
|
+
<App />
|
|
11
14
|
</MUIThemeContextProvider>
|
|
15
|
+
</StrictMode>,
|
|
16
|
+
);
|
|
17
|
+
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
# 2 apply my theme so mui looks better and has lots of colors
|
|
21
|
+
|
|
22
|
+
```js
|
|
23
|
+
import { useMUIThemeContext } from "@abhishekzambare/mui";
|
|
24
|
+
import { Button, Stack, ThemeProvider } from "@mui/material";
|
|
25
|
+
|
|
26
|
+
function App() {
|
|
27
|
+
const theme = useMUIThemeContext();
|
|
28
|
+
|
|
29
|
+
return (
|
|
30
|
+
<ThemeProvider theme={theme.Theme_WebApp_Theme}>
|
|
31
|
+
<>
|
|
32
|
+
<Stack spacing={2} direction="row">
|
|
33
|
+
<Button variant="text">Text</Button>
|
|
34
|
+
<Button variant="contained">Contained</Button>
|
|
35
|
+
<Button variant="outlined">Outlined</Button>
|
|
36
|
+
</Stack>
|
|
37
|
+
</>
|
|
38
|
+
</ThemeProvider>
|
|
12
39
|
);
|
|
13
|
-
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
export default App;
|
|
14
43
|
```
|
|
15
44
|
|
|
16
|
-
#
|
|
45
|
+
# 3 use the theme component to change theme colors use it anywere but within the provider tree
|
|
17
46
|
|
|
18
47
|
```js
|
|
19
|
-
import { YinYangThemesMenu } from "@abhishekzambare/mui";
|
|
48
|
+
import { useMUIThemeContext, YinYangThemesMenu } from "@abhishekzambare/mui";
|
|
49
|
+
import { Button, Stack, ThemeProvider } from "@mui/material";
|
|
50
|
+
|
|
51
|
+
function App() {
|
|
52
|
+
const theme = useMUIThemeContext();
|
|
20
53
|
|
|
21
|
-
const App = () => {
|
|
22
54
|
return (
|
|
23
|
-
<
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
55
|
+
<ThemeProvider theme={theme.Theme_WebApp_Theme}>
|
|
56
|
+
<>
|
|
57
|
+
<Stack spacing={2} direction="row">
|
|
58
|
+
<Button variant="text">Text</Button>
|
|
59
|
+
<Button variant="contained">Contained</Button>
|
|
60
|
+
<Button variant="outlined">Outlined</Button>
|
|
61
|
+
</Stack>
|
|
62
|
+
<YinYangThemesMenu />
|
|
63
|
+
</>
|
|
64
|
+
</ThemeProvider>
|
|
28
65
|
);
|
|
29
|
-
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
export default App;
|
|
30
69
|
```
|
|
31
70
|
|
|
32
71
|
- [By Abhishek Zambare](http://abhishekzambare.vercel.app/)
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@abhishekzambare/mui",
|
|
3
3
|
"description": "MUI Wrapper",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.19",
|
|
5
5
|
"author": "Abhishek Zambare",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"private": false,
|
|
@@ -40,33 +40,33 @@
|
|
|
40
40
|
},
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@abhishekzambare/animate": "^0.0.2",
|
|
43
|
-
"@babel/core": "^7.29.
|
|
43
|
+
"@babel/core": "^7.29.7",
|
|
44
44
|
"@emotion/react": "^11.14.0",
|
|
45
45
|
"@emotion/styled": "^11.14.1",
|
|
46
46
|
"@eslint/js": "^10.0.1",
|
|
47
47
|
"@microsoft/api-extractor": "^7.58.7",
|
|
48
|
-
"@mui/icons-material": "^9.0.
|
|
49
|
-
"@mui/material": "^9.0.
|
|
48
|
+
"@mui/icons-material": "^9.0.1",
|
|
49
|
+
"@mui/material": "^9.0.1",
|
|
50
50
|
"@rolldown/plugin-babel": "^0.2.3",
|
|
51
51
|
"@types/babel__core": "^7.20.5",
|
|
52
|
-
"@types/node": "^
|
|
53
|
-
"@types/react": "^19.2.
|
|
52
|
+
"@types/node": "^25.9.2",
|
|
53
|
+
"@types/react": "^19.2.17",
|
|
54
54
|
"@types/react-dom": "^19.2.3",
|
|
55
|
-
"@vitejs/plugin-react": "^6.0.
|
|
55
|
+
"@vitejs/plugin-react": "^6.0.2",
|
|
56
56
|
"babel-plugin-react-compiler": "^1.0.0",
|
|
57
|
-
"eslint": "^10.
|
|
57
|
+
"eslint": "^10.4.1",
|
|
58
58
|
"eslint-config-prettier": "^10.1.8",
|
|
59
|
-
"eslint-plugin-prettier": "^5.5.
|
|
59
|
+
"eslint-plugin-prettier": "^5.5.6",
|
|
60
60
|
"eslint-plugin-react-hooks": "^7.1.1",
|
|
61
61
|
"eslint-plugin-react-refresh": "^0.5.2",
|
|
62
|
-
"globals": "^17.
|
|
63
|
-
"react": "^19.2.
|
|
64
|
-
"react-dom": "^19.2.
|
|
65
|
-
"typescript": "~6.0.
|
|
66
|
-
"typescript-eslint": "^8.
|
|
67
|
-
"unplugin-dts": "^1.0.
|
|
68
|
-
"vite": "^8.0.
|
|
69
|
-
"vite-plugin-checker": "^0.
|
|
62
|
+
"globals": "^17.6.0",
|
|
63
|
+
"react": "^19.2.7",
|
|
64
|
+
"react-dom": "^19.2.7",
|
|
65
|
+
"typescript": "~6.0.3",
|
|
66
|
+
"typescript-eslint": "^8.60.1",
|
|
67
|
+
"unplugin-dts": "^1.0.2",
|
|
68
|
+
"vite": "^8.0.16",
|
|
69
|
+
"vite-plugin-checker": "^0.14.1"
|
|
70
70
|
},
|
|
71
71
|
"peerDependencies": {
|
|
72
72
|
"react": "^19",
|