https://github.com/skn437/skn-mui-types
A Simple Type Definition Extension Library For Material UI 5
https://github.com/skn437/skn-mui-types
bun library material-ui nextjs nodejs npm react types typescript
Last synced: 5 months ago
JSON representation
A Simple Type Definition Extension Library For Material UI 5
- Host: GitHub
- URL: https://github.com/skn437/skn-mui-types
- Owner: skn437
- License: mit
- Created: 2024-08-24T19:10:49.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-10-23T06:30:34.000Z (9 months ago)
- Last Synced: 2025-10-23T08:35:58.789Z (9 months ago)
- Topics: bun, library, material-ui, nextjs, nodejs, npm, react, types, typescript
- Language: Shell
- Homepage:
- Size: 30.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SKN Material UI Type Extension Library
> TypeScript React
[](https://www.npmjs.com/package/@best-skn/mui-types) [](https://opensource.org/license/mit)
## **_Introduction:_**
### This is a simple TypeScript Type Extension Library for Material UI 6, React 18 & also for Next.js 14
### I made this library so that I can use it in all of my Next.js 14 projects without writing the same codes over and over again
## **_Details:_**
### **`Sx` Type**
- It provides total intellisense of material ui styles in separate files to be used as `sx`
- This type will help to de-clutter your jsx/tsx components because you can create `sx` styles outside the
components and later use it inside them
- For usage instruction, see `Usage` section
## **_Use Case:_**
- React
- Next.js
## **_Requirements:_**
### This library has peer dependency for React & React DOM of minimum 18.3.1. It may or may not work on 19.x
### It has peer dependency for Material UI of minimum 6.0.1. It may or may not work on 7.x
### This library is intended to be used in Next.js of minimum 14.2.3. It may or may not work on 15.x
- 💀 Minimum [react](https://www.npmjs.com/package/react) Version: `18.3.1`
- 💀 Minimum [@types/react](https://www.npmjs.com/package/@types/react) Version: `18.3.3`
- 💀 Minimum [react-dom](https://www.npmjs.com/package/react-dom) Version: `18.3.1`
- 💀 Minimum [@types/react-dom](https://www.npmjs.com/package/@types/react-dom) Version: `18.3.0`
- 💀 Minimum [next](https://www.npmjs.com/package/next) Version: `14.2.3`
- 💀 Minimum [material-ui](https://www.npmjs.com/package/@mui/material) Version: `6.0.1`
## **_Complementary Libraries:_**
- [@best-skn/react-types](https://www.npmjs.com/package/@best-skn/react-types)
- [@best-skn/next-types](https://www.npmjs.com/package/@best-skn/next-types)
- [@best-skn/framer-types](https://www.npmjs.com/package/@best-skn/framer-types)
## **_Usage:_**
### To install the package, type the following in console
> ```zsh
> npm add -D @best-skn/mui-types
> #or
> yarn add -D @best-skn/mui-types
> #or
> pnpm add -D @best-skn/mui-types
> #or
> bun add -D @best-skn/mui-types
> ```
### Create a directory called `types` in the root location of your project, and create a file called `mui.d.ts`, then do this
> ```typescript
> import "@best-skn/mui-types";
> ```
### Check your `tsconfig.json` if `includes` property has `**/*.ts`, `**/*.tsx` otherwise the type definition file may not work
### Now Inside your Next.js 14 Project, use the package like this (Just an example)
#### **_`Sx` Type:_**
##### (1) Material UI style `sx` in separate file
> ```typescript
> import type { Sx } from "@mui/material";
>
> type Key = "container" | "box"; // * Create sx names here
>
> export const sx: Sx = {
> //* You'll get total intellisense for `sx` names
> container: {
> //* You'll get intellisense for Material UI SX styles inside
> display: "flex",
> //* other styles here...
> },
> box: {
> color: "blue",
> //* other styles here...
> },
> };
> ```
##### (2) Import & use the created `sx` inside components in Next.js
> ```typescript jsx
> "use client"
>
> import Typography from "@mui/material/Typography";
> import { sx } from "./sx.ts";
>
> const HomeComponent: React.FC = () => {
> return (
> variant="h6"
> component="div"
> sx={sx.box} //* Use `sx` style here
> >
> Home Component
>
> );
> };
>
> export default HomeComponent;
> ```
## **_Dedicated To:_**
- 👩🎨`Prodipta Das Logno` & 🧛♀️`Atoshi Sarker Prithula`: The two most special ladies of my life. My best wishes will always be with you two. May you two always be happy.
- 💯`My Parents`: The greatest treasures of my life ever.
## **_License:_**
Copyright (C) 2024 SKN Shukhan
Licensed under the MIT License