diff --git a/src/mui/index.ts b/src/mui/index.ts index 6fb98d0..d678345 100644 --- a/src/mui/index.ts +++ b/src/mui/index.ts @@ -1,3 +1,3 @@ -export { tss, makeStyles, useStyles, withStyles } from "./mui"; +export { tss, makeStyles, useStyles, withStyles, clsx } from "./mui"; export { useMuiThemeStyleOverridesPlugin } from "./themeStyleOverridesPlugin"; export type { MuiThemeStyleOverridesPluginParams } from "./themeStyleOverridesPlugin"; diff --git a/src/mui/mui.ts b/src/mui/mui.ts index 4786074..9761707 100644 --- a/src/mui/mui.ts +++ b/src/mui/mui.ts @@ -2,12 +2,15 @@ import { useTheme } from "@mui/material/styles"; import { createMakeAndWithStyles } from "../index"; import { createTss } from "../tss"; import { useMuiThemeStyleOverridesPlugin } from "./themeStyleOverridesPlugin"; +import { clsx } from "../tools/clsx"; /** @see */ export const { makeStyles, withStyles } = createMakeAndWithStyles({ useTheme }); +export { clsx }; + export const { tss } = createTss({ "useContext": function useContext() { const theme = useTheme(); diff --git a/src/tools/clsx.ts b/src/tools/clsx.ts new file mode 100644 index 0000000..c2e49a4 --- /dev/null +++ b/src/tools/clsx.ts @@ -0,0 +1,24 @@ +import { classnames } from "./classnames"; + +export type ClassValue = + | ClassArray + | ClassDictionary + | string + | null + | boolean + | undefined; + +export interface ClassDictionary { + [id: string]: any; +} + +// eslint-disable-next-line @typescript-eslint/no-empty-interface +export interface ClassArray extends Array {} + +/** + * Polyfill for cslx. + * This is indended to be used ONLY with the withStyles API. + * Otherwise use `const { cx } = useStyles();` instead. + */ +export const clsx: (...classes: ClassValue[]) => string = (...classes) => + classnames(classes);