🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

mui-styles

Package Overview
Dependencies
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mui-styles - npm Package Compare versions

Comparing version
3.0.1
 to
3.0.3
+1
-1
LICENSE
MIT License
Copyright (c) 2023 blencm
Copyright (c) 2026 Blencm

@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

+56
-61
package.json
{
"name": "mui-styles",
"version": "3.0.1",
"version": "3.0.3",
"private": false,
"author": "Bleker <bleker@gliyen.com>",
"description": "Type-safe styling utilities and helpers for Material UI (MUI).",
"description": "Type-safe legacy JSS styling helpers for Material UI: makeStyles, withStyles, styled, StylesProvider and SSR utilities.",
"license": "MIT",

@@ -22,7 +22,9 @@ "repository": {

"styles",
"makeStyles",
"withStyles",
"styled",
"jss",
"theming",
"theme",
"css-in-js",
"emotion",
"jss",
"typescript",

@@ -45,7 +47,8 @@ "react",

"scripts": {
"dev": "cross-env NODE_ENV=test",
"build": "rimraf ./lib && tsup src/index.ts src/cli.ts --dts --format esm,cjs --outDir=lib --sourcemap",
"test": "cross-env NODE_ENV=test && jest",
"test:watch": "jest --watch",
"prepublishOnly": "npm run test && npm run build"
"clean": "rimraf ./lib",
"typecheck": "tsc -p tsconfig.build.json --noEmit",
"build": "npm run clean && tsup src/index.ts --dts --format esm,cjs --outDir=lib --sourcemap --tsconfig tsconfig.build.json",
"test": "cross-env NODE_ENV=test jest --runInBand",
"test:watch": "cross-env NODE_ENV=test jest --watch",
"prepublishOnly": "npm run typecheck && npm run test && npm run build"
},

@@ -61,46 +64,6 @@ "files": [

},
"devDependencies": {
"@babel/cli": "^7.28.6",
"@babel/core": "^7.29.0",
"@babel/node": "^7.29.0",
"@babel/plugin-syntax-jsx": "^7.28.6",
"@babel/plugin-transform-object-assign": "^7.27.1",
"@babel/plugin-transform-react-constant-elements": "^7.27.1",
"@babel/plugin-transform-runtime": "^7.29.0",
"@babel/preset-env": "^7.29.0",
"@babel/preset-react": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"dependencies": {
"@emotion/hash": "^0.9.2",
"@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.1",
"@jest/globals": "^30.2.0",
"@mui/material": "^7.3.8",
"@mui/types": "^7.4.11",
"@mui/utils": "^7.3.8",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/chai": "^5.2.3",
"@types/hoist-non-react-statics": "^3.3.7",
"@types/jest": "^30.0.0",
"@types/mocha": "^10.0.10",
"@types/node": "^25.2.3",
"@types/prop-types": "^15.7.15",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"babel-jest": "^30.2.0",
"babel-loader": "^10.0.0",
"babel-plugin-istanbul": "^7.0.1",
"babel-plugin-macros": "^3.1.0",
"babel-plugin-module-resolver": "^5.0.2",
"babel-plugin-optimize-clsx": "^2.6.2",
"babel-plugin-react-remove-properties": "^0.3.1",
"babel-plugin-tester": "^12.0.0",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"clsx": "^2.1.1",
"cross-env": "^10.1.0",
"hoist-non-react-statics": "^3.3.2",
"inferno-server": "^9.0.11",
"jest": "^30.2.0",
"jest-environment-jsdom": "^30.2.0",
"jss": "^10.10.0",

@@ -114,16 +77,19 @@ "jss-plugin-camel-case": "^10.10.0",

"jss-plugin-vendor-prefixer": "^10.10.0",
"mocha": "^11.7.5",
"prop-types": "^15.8.1",
"react": "^19.2.4",
"react-dom": "^19.2.4",
"rimraf": "^6.1.3",
"ts-jest": "^29.4.6",
"tsup": "^8.5.1",
"typescript": "^5.9.3"
"prop-types": "^15.8.1"
},
"peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.3.1 || ^19.2.4 || ^20.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.3.1 || ^19.2.4 || ^20.0.0"
"@emotion/react": ">=11",
"@emotion/styled": ">=11",
"@mui/material": ">=5 <20",
"@mui/utils": ">=5 <20",
"react": ">=17 <21",
"react-dom": ">=17 <21"
},
"peerDependenciesMeta": {
"@emotion/react": {
"optional": true
},
"@emotion/styled": {
"optional": true
},
"react-dom": {

@@ -133,5 +99,34 @@ "optional": true

},
"devDependencies": {
"@babel/core": "^7.29.0",
"@babel/plugin-syntax-jsx": "^7.28.6",
"@babel/preset-env": "^7.29.2",
"@babel/preset-react": "^7.28.5",
"@babel/preset-typescript": "^7.28.5",
"@jest/globals": "^30.3.0",
"@emotion/styled": "^11.14.1",
"@mui/material": "^9.0.0",
"@mui/utils": "^9.0.0",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
"@testing-library/user-event": "^14.6.1",
"@types/hoist-non-react-statics": "^3.3.7",
"@types/jest": "^30.0.0",
"@types/node": "^25.6.0",
"@types/prop-types": "^15.7.15",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3",
"babel-jest": "^30.3.0",
"cross-env": "^10.1.0",
"jest": "^30.3.0",
"jest-environment-jsdom": "^30.3.0",
"react": "^19.2.5",
"react-dom": "^19.2.5",
"rimraf": "^6.1.3",
"tsup": "^8.5.1",
"typescript": "^6.0.3"
},
"publishConfig": {
"access": "public"
}
}
}
+629
-56
README.md

@@ -1,103 +0,676 @@

## mui-styles
# mui-styles
[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://opensource.org/licenses/MIT)
Type-safe legacy JSS styling helpers for Material UI.
`mui-styles` provides the familiar APIs used in older Material UI projects:
Material UI v5 and later versions
- `makeStyles`
- `withStyles`
- `styled`
- `StylesProvider`
- `ThemeProvider`
- `ServerStyleSheets`
- `useTheme`
- `useThemeVariants`
- `getThemeProps`
- `mergeClasses`
- `propsToClassKey`
- `createStyles`
- `createGenerateClassName`
- `createGenerateClassNameHash`
## Install
> **Important**: this package is a JSS compatibility layer. For new Material UI applications, prefer `sx`, `styled` from MUI System, or Emotion-based styling. Use this package when you need to keep or migrate a codebase that already depends on `makeStyles`, `withStyles`, or JSS-style objects.
Using npm:
## Requirements
```sh
npm install mui-styles
- Node.js `>=18`
- React `>=17 <21`
- Material UI `>=5 <10`
- JSS `10.x` runtime dependencies are installed by this package
## Installation
```bash
npm install mui-styles @mui/material @emotion/react @emotion/styled react react-dom
```
### Usage Example
With pnpm:
```javascript
import { makeStyles } from "mui-styles";
```bash
pnpm add mui-styles @mui/material @emotion/react @emotion/styled react react-dom
```
With yarn:
```bash
yarn add mui-styles @mui/material @emotion/react @emotion/styled react react-dom
```
## Quick start
```tsx
import * as React from 'react';
import { makeStyles } from 'mui-styles';
const useStyles = makeStyles({
container: {
width: "100%",
height: 100,
padding: 10,
root: {
padding: 16,
borderRadius: 12,
backgroundColor: '#fff',
borderRadius: 20
},
title: {
margin: 0,
fontWeight: 700,
},
});
export default function App() {
export function App() {
const classes = useStyles();
return <div className={classes.container}>Hello world</div>;
return (
<section className={classes.root}>
<h1 className={classes.title}>Hello mui-styles</h1>
</section>
);
}
```
MakeStyles with theme
```javascript
import { makeStyles, Theme } from "mui-styles";
## API
const useStyles = makeStyles((theme: Theme) => ({
width: "100%",
height: 100,
padding: 10,
backgroundColor: theme.palette.primary.main,
borderRadius: 20,
### `makeStyles(styles, options?)`
Creates a hook that returns generated class names.
```tsx
import { makeStyles } from 'mui-styles';
const useStyles = makeStyles({
card: {
padding: 24,
borderRadius: 16,
},
});
function Card() {
const classes = useStyles();
return <div className={classes.card}>Card</div>;
}
```
#### With theme
```tsx
import { createTheme } from '@mui/material/styles';
import { ThemeProvider, makeStyles } from 'mui-styles';
const theme = createTheme({
palette: {
primary: {
main: '#2563eb',
},
},
});
const useStyles = makeStyles((theme) => ({
button: {
color: theme.palette.primary.main,
padding: theme.spacing(1.5, 2),
},
}));
export default function App() {
export function Example() {
const classes = useStyles();
return <div className={classes.container}>Hello world</div>;
return (
<ThemeProvider theme={theme}>
<button className={classes.button}>Save</button>
</ThemeProvider>
);
}
```
Styled components
#### With props
```javascript
import { styled } from "mui-styles";
import { Card } from "@mui/material";
```tsx
import { makeStyles } from 'mui-styles';
const MuiCard = styled(Card)({
maxWidth: 300,
borderRadius: 20,
padding: 15,
margin: 20,
textAlign: "center"
type StyleProps = {
color: string;
dense?: boolean;
};
const useStyles = makeStyles<unknown, StyleProps>({
root: {
color: (props) => props.color,
padding: (props) => (props.dense ? 8 : 16),
},
});
export default function StyledComponents() {
return <MuiCard>Styled with card</MuiCard>;
function Message() {
const classes = useStyles({ color: '#16a34a', dense: true });
return <p className={classes.root}>Ready</p>;
}
```
With styles component
#### Override classes from props
```javascript
```tsx
const useStyles = makeStyles({
root: { padding: 16 },
});
function Panel({ classes: classesProp }: { classes?: { root?: string } }) {
const classes = useStyles({ classes: classesProp });
return <div className={classes.root}>Panel</div>;
}
```
#### Options
```tsx
const useStyles = makeStyles(
{
root: { display: 'flex' },
},
{
name: 'MyComponent',
classNamePrefix: 'MyComponent',
flip: false,
},
);
```
Common options:
| Option | Description |
| --- | --- |
| `name` | Component name used for theme overrides and variants. |
| `classNamePrefix` | Prefix used in development class names. |
| `defaultTheme` | Theme used when no theme exists in context. |
| `flip` | Enables or disables RTL flipping. |
| `Component` | Component reference used in development warnings. |
### `createStyles(styles)`
Identity helper that improves TypeScript inference for style objects.
```tsx
import { createStyles, makeStyles } from 'mui-styles';
const useStyles = makeStyles(
createStyles({
root: {
display: 'grid',
gap: 12,
},
}),
);
```
### `withStyles(styles, options?)(Component)`
Higher-order component API. It injects a `classes` prop into the wrapped component.
```tsx
import * as React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'mui-styles';
const useStyles = {
container: {
width: "100vw",
height: "100vh",
padding: 0,
const styles = {
root: {
padding: 16,
borderRadius: 12,
},
};
function WithStylesComponent(props) {
const { classes } = props;
return <div className={classes.container}>With styles component</div>;
function View(props: { classes: Record<'root', string>; label: string }) {
return <div className={props.classes.root}>{props.label}</div>;
}
WithStylesComponent.propTypes = {
classes: PropTypes.object.isRequired,
export default withStyles(styles)(View);
```
#### `withStyles` with theme default props
```tsx
import { createTheme } from '@mui/material/styles';
import { ThemeProvider, withStyles } from 'mui-styles';
const theme = createTheme({
components: {
MyBadge: {
defaultProps: {
label: 'Default label',
},
},
},
});
const Badge = withStyles(
{
root: { fontWeight: 700 },
},
{ name: 'MyBadge' },
)(({ classes, label }: any) => <span className={classes.root}>{label}</span>);
export function App() {
return (
<ThemeProvider theme={theme}>
<Badge />
</ThemeProvider>
);
}
```
#### `withStyles` with `withTheme`
```tsx
const Enhanced = withStyles(
{ root: { padding: 8 } },
{ withTheme: true },
)(({ classes, theme }: any) => (
<div className={classes.root}>{theme.palette.mode}</div>
));
```
### `styled(Component)(styles, options?)`
Small JSS-based styled helper.
```tsx
import { Button } from '@mui/material';
import { styled } from 'mui-styles';
const PrimaryButton = styled(Button)({
borderRadius: 999,
padding: '10px 18px',
textTransform: 'none',
});
export function Example() {
return <PrimaryButton>Continue</PrimaryButton>;
}
```
#### `styled` with theme and props
```tsx
type Props = {
danger?: boolean;
};
export default withStyles(useStyles)(WithStylesComponent);
const AlertBox = styled<'div', Props>('div')((props) => ({
padding: 16,
borderRadius: 12,
color: props.danger ? '#991b1b' : props.theme.palette.text.primary,
backgroundColor: props.danger ? '#fee2e2' : props.theme.palette.background.paper,
}));
```
## Authors
#### `styled` with `component`, `clone`, and render function
- [@blencm](https://www.github.com/blencm)
```tsx
const Box = styled('div')({ padding: 16 });
<Box component="section">Section</Box>;
<Box clone>
<button type="button">Cloned button</button>
</Box>;
<Box>{({ className }) => <main className={className}>Render function</main>}</Box>;
```
### `ThemeProvider`
Re-export of Material UI's `ThemeProvider` from `@mui/material/styles`.
```tsx
import { createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'mui-styles';
const theme = createTheme();
export function Root() {
return <ThemeProvider theme={theme}>...</ThemeProvider>;
}
```
### `useTheme()`
Returns the current Material UI theme.
```tsx
import { useTheme } from 'mui-styles';
function Toolbar() {
const theme = useTheme();
return <div style={{ color: theme.palette.primary.main }}>Toolbar</div>;
}
```
### `StylesProvider`
Controls the JSS instance, class name generator, SSR sheet registry, and injection order.
```tsx
import { StylesProvider } from 'mui-styles';
export function App() {
return (
<StylesProvider injectFirst>
<YourApp />
</StylesProvider>
);
}
```
#### Custom class name generator
```tsx
import { StylesProvider, createGenerateClassName } from 'mui-styles';
const generateClassName = createGenerateClassName({
productionPrefix: 'app',
seed: 'tenant-a',
});
export function App() {
return (
<StylesProvider generateClassName={generateClassName}>
<YourApp />
</StylesProvider>
);
}
```
### `ServerStyleSheets`
Collects generated JSS styles during server-side rendering.
```tsx
import * as React from 'react';
import { renderToString } from 'react-dom/server';
import { ServerStyleSheets } from 'mui-styles';
import App from './App';
export function render() {
const sheets = new ServerStyleSheets();
const html = renderToString(sheets.collect(<App />));
const css = sheets.toString();
return `<!doctype html>
<html>
<head>
<style id="jss-server-side">${css}</style>
</head>
<body>
<div id="root">${html}</div>
</body>
</html>`;
}
```
You can also render the style element directly:
```tsx
const styleElement = sheets.getStyleElement({ nonce: 'nonce-value' });
```
### `getThemeProps({ theme, name, props })`
Applies `theme.components[name].defaultProps` to a props object.
```tsx
import { getThemeProps, useTheme } from 'mui-styles';
function MyComponent(inProps: { size?: 'sm' | 'md' }) {
const theme = useTheme();
const props = getThemeProps({ theme, name: 'MyComponent', props: inProps });
return <div>{props.size}</div>;
}
```
### `useThemeVariants(props, name)`
Returns matching variant class names based on `theme.components[name].variants`.
```tsx
const useStyles = makeStyles(
{
root: {},
outlinedPrimary: {
border: '1px solid currentColor',
},
},
{ name: 'MyButton' },
);
function MyButton(props: { variant?: string; color?: string }) {
const classes = useStyles(props);
const variantsClassName = useThemeVariants({ ...props, classes }, 'MyButton');
return <button className={`${classes.root} ${variantsClassName}`}>Button</button>;
}
```
Theme example:
```tsx
const theme = createTheme({
components: {
MyButton: {
variants: [
{
props: { variant: 'outlined', color: 'primary' },
style: {
borderWidth: 2,
},
},
],
},
},
});
```
### `mergeClasses({ baseClasses, newClasses, Component? })`
Merges generated classes with user-provided overrides.
```tsx
import { mergeClasses } from 'mui-styles';
const classes = mergeClasses({
baseClasses: { root: 'root-generated' },
newClasses: { root: 'root-custom' },
});
// { root: 'root-generated root-custom' }
```
### `propsToClassKey(props)`
Builds deterministic class keys for variant props.
```tsx
import { propsToClassKey } from 'mui-styles';
propsToClassKey({ variant: 'outlined', color: 'primary' });
// outlinedPrimary
propsToClassKey({ size: 'small', color: 'secondary' });
// secondarySizeSmall
```
### `createGenerateClassName(options?)`
Creates the default class name generator.
```tsx
import { createGenerateClassName } from 'mui-styles';
const generateClassName = createGenerateClassName({
productionPrefix: 'app',
seed: 'admin',
disableGlobal: false,
});
```
Options:
| Option | Description |
| --- | --- |
| `disableGlobal` | Disables global `Mui-*` class names. |
| `productionPrefix` | Prefix used in production class names. |
| `seed` | Prefix used to isolate multiple apps on the same page. |
### `createGenerateClassNameHash(options?)`
Creates a hash-based class name generator.
```tsx
import { StylesProvider, createGenerateClassNameHash } from 'mui-styles';
const generateClassName = createGenerateClassNameHash();
export function App() {
return (
<StylesProvider generateClassName={generateClassName}>
<YourApp />
</StylesProvider>
);
}
```
Global CSS mode:
```tsx
const generateClassName = createGenerateClassNameHash({
dangerouslyUseGlobalCSS: true,
});
```
Use `dangerouslyUseGlobalCSS` only when you intentionally want predictable global class names.
## TypeScript examples
### Strongly typed class keys
```tsx
import { makeStyles } from 'mui-styles';
type ClassKey = 'root' | 'label';
const useStyles = makeStyles<unknown, {}, ClassKey>({
root: { display: 'flex' },
label: { fontWeight: 600 },
});
const classes = useStyles();
classes.root;
classes.label;
```
### Strongly typed props
```tsx
type StyleProps = {
active: boolean;
};
const useStyles = makeStyles<unknown, StyleProps>({
root: {
opacity: (props) => (props.active ? 1 : 0.5),
},
});
function Item() {
const classes = useStyles({ active: true });
return <div className={classes.root}>Item</div>;
}
```
### Theme type
```tsx
import type { Theme } from 'mui-styles';
const useStyles = makeStyles<Theme>((theme) => ({
root: {
color: theme.palette.text.primary,
},
}));
```
## Production usage
Recommended checks before publishing:
```bash
npm run typecheck
npm run test
npm run build
npm publish --access public
```
The package publishes only:
- `lib`
- `README.md`
- `LICENSE`
## Build output
The package exports both ESM and CommonJS:
```json
{
"main": "./lib/index.cjs",
"module": "./lib/index.js",
"types": "./lib/index.d.ts"
}
```
## Troubleshooting
### `makeStyles` returns empty classes
Check that `StylesProvider` is not using `disableGeneration` and that your component is rendered in the browser or collected with `ServerStyleSheets` on the server.
### Theme is empty inside `makeStyles((theme) => ...)`
Wrap your app with `ThemeProvider`:
```tsx
import { createTheme } from '@mui/material/styles';
import { ThemeProvider } from 'mui-styles';
const theme = createTheme();
<ThemeProvider theme={theme}>
<App />
</ThemeProvider>;
```
### Styles are injected after MUI/Emotion styles
Use `injectFirst`:
```tsx
<StylesProvider injectFirst>
<App />
</StylesProvider>
```
### Server-side styles are missing
Use `ServerStyleSheets` and inject the collected CSS in the server-rendered HTML.
### Unexpected duplicate styles in development
React development mode may mount components more than once. The registry and sheet cleanup are designed to avoid stale sheets, but custom JSS instances should still be stable between renders.
## Notes about legacy JSS
This library intentionally keeps a JSS API for compatibility. MUI's modern styling stack is based on Emotion, `sx`, and MUI System. For greenfield applications, prefer the modern MUI styling APIs. For legacy or migration projects, `mui-styles` can reduce migration cost while keeping TypeScript support and SSR helpers.
lib/index.cjs

Sorry, the diff of this file is too big to display

lib/index.cjs.map

Sorry, the diff of this file is too big to display

lib/index.d.cts

Sorry, the diff of this file is too big to display

lib/index.d.ts

Sorry, the diff of this file is too big to display

lib/index.js

Sorry, the diff of this file is too big to display

lib/index.js.map

Sorry, the diff of this file is too big to display