mui-material-compact

Helper to create compact @mui/material theme

Install

npm i mui-material-compact

Usage

import { ThemeProvider, TextField } from '@mui/material';
import { createCompactTheme } from 'mui-material-compact';

const theme = createCompactTheme({
  // Your theme options...
});

<ThemeProvider theme={theme}>
  <TextField size="small" />
  <TextField size="medium" />
  <TextField size="large" />
</ThemeProvider>;

If you are using TypeScript, modify your tsconfig.json to enable extra size variants:

{
  "compilerOptions": {
    "types": ["mui-material-compact/overrides"]
  }
}

👉 check online preview

Changelog

1.8.0 - 2023-07-31

• Changed body1 fontSize to 14px and body2 fontSize to 12px

1.7.0 - 2023-07-19

• Changed <DialogTitle/>'s variant from h5 to h3

1.6.0 - 2023-06-23

• Added responsiveFontSizes() wrapper with factor: 2

1.5.0 - 2023-06-14

• Changed <CardHeader/>'s title from h5 to h3

1.4.0 - 2023-06-11

• Changed <ToggleButton/> sizes
• Changed heading font sizes

1.3.1 - 2023-06-05

• Fixed adornment placement

1.3.0 - 2023-06-05

• Fixed <TextField multiline /> styles
• Reduced heading font sizes

1.2.0 - 2023-04-11

• Added styles for <Autocomplete/>

1.1.0 - 2023-03-13

• Added size="large" variant to <TextField/>
• Deprecated <LargeTextField/> component

1.0.0 - 2023-03-12

• Added createCompactTheme() function
• Added <LargeTextField/> component
• Added style overrides for <TextField/> and <Button/>, so they have the same height