https://github.com/guoyunhe/material-compact
Helper to create compact @mui/material theme
https://github.com/guoyunhe/material-compact
material material-design material-ui mui theme
Last synced: about 1 month ago
JSON representation
Helper to create compact @mui/material theme
- Host: GitHub
- URL: https://github.com/guoyunhe/material-compact
- Owner: guoyunhe
- License: gpl-3.0
- Created: 2023-02-20T05:13:50.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-19T07:25:08.000Z (about 1 year ago)
- Last Synced: 2024-10-13T07:54:25.126Z (8 months ago)
- Topics: material, material-design, material-ui, mui, theme
- Language: TypeScript
- Homepage: https://guoyunhe.github.io/material-compact/
- Size: 1.07 MB
- Stars: 12
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Material Compact
Helper to create compact `@mui/material` (material-ui) theme
- Components are more compact in size
- `Button`, `TextField`, `Autocomplete` and `Select` share same height
- `TextField`, `Autocomplete` and `Select` support large size
- `Button` text are not forced uppper-case anymore
## Install
```bash
npm install --save material-compact
```
## Usage
```jsx
import { Button, Stack, TextField, ThemeProvider } from '@mui/material';
import { createCompactTheme } from 'material-compact';
const theme = createCompactTheme({
// Your theme options...
});
render(
Button
Button
Button
);
```
If you are using TypeScript, modify your `tsconfig.json` to enable extra size variants:
```json
{
"compilerOptions": {
"types": ["material-compact/overrides"]
}
}
```
## Comparison
```jsx
import { Button, createTheme, Stack, TextField, ThemeProvider, Typography } from '@mui/material';
import { createCompactTheme } from 'material-compact';
const compactTheme = createCompactTheme({
// Your theme options...
});
const normalTheme = createTheme({
// Your theme options...
});
render(
Compact Theme
Button
Button
Normal Theme
Button
Button
);
```
👉 [check online preview](https://guoyunhe.github.io/material-compact/)