@mui/material
Version:
Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.
102 lines (92 loc) • 3.09 kB
TypeScript
import {
ThemeOptions as SystemThemeOptions,
Theme as SystemTheme,
SxProps,
CSSObject,
SxConfig,
} from '@mui/system';
import { Mixins, MixinsOptions } from './createMixins';
import { Palette, PaletteOptions } from './createPalette';
import { Typography, TypographyOptions } from './createTypography';
import { Shadows } from './shadows';
import { Transitions, TransitionsOptions } from './createTransitions';
import { ZIndex, ZIndexOptions } from './zIndex';
import { Components } from './components';
import { CssVarsTheme, CssVarsPalette, ColorSystemOptions } from './createThemeWithVars';
/**
* To disable custom properties, use module augmentation
*
* @example
* declare module '@mui/material/styles' {
* interface CssThemeVariables {
* enabled: true;
* }
* }
*/
export interface CssThemeVariables {}
type CssVarsOptions = CssThemeVariables extends {
enabled: true;
}
? ColorSystemOptions
: {};
export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVarsOptions {
mixins?: MixinsOptions;
components?: Components<Omit<Theme, 'components'>>;
palette?: PaletteOptions;
shadows?: Shadows;
transitions?: TransitionsOptions;
typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
zIndex?: ZIndexOptions;
unstable_strictMode?: boolean;
unstable_sxConfig?: SxConfig;
}
interface BaseTheme extends SystemTheme {
mixins: Mixins;
palette: Palette & (CssThemeVariables extends { enabled: true } ? CssVarsPalette : {});
shadows: Shadows;
transitions: Transitions;
typography: Typography;
zIndex: ZIndex;
unstable_strictMode?: boolean;
}
// shut off automatic exporting for the `BaseTheme` above
export {};
type CssVarsProperties = CssThemeVariables extends { enabled: true }
? Pick<
CssVarsTheme,
| 'applyStyles'
| 'colorSchemes'
| 'colorSchemeSelector'
| 'rootSelector'
| 'cssVarPrefix'
| 'defaultColorScheme'
| 'getCssVar'
| 'getColorSchemeSelector'
| 'generateThemeVars'
| 'generateStyleSheets'
| 'generateSpacing'
| 'shouldSkipGeneratingVar'
| 'vars'
>
: {};
/**
* Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
*/
export interface Theme extends BaseTheme, CssVarsProperties {
cssVariables?: false;
components?: Components<BaseTheme>;
unstable_sx: (props: SxProps<Theme>) => CSSObject;
unstable_sxConfig: SxConfig;
}
/**
* @deprecated
* Use `import { createTheme } from '@mui/material/styles'` instead.
*/
export function createMuiTheme(options?: ThemeOptions, ...args: object[]): Theme;
/**
* Generate a theme base on the options received.
* @param options Takes an incomplete theme object and adds the missing parts.
* @param args Deep merge the arguments with the about to be returned theme.
* @returns A complete, ready-to-use theme object.
*/
export default function createThemeNoVars(options?: ThemeOptions, ...args: object[]): Theme;