or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

components.mdcss-in-js.mdindex.mdstyle-functions.mdtheme-system.mdutilities.md
tile.json

tessl/npm-mui--system

MUI System is a set of CSS utilities to help you build custom designs more efficiently with composable style functions, responsive design utilities, and theme-aware styling.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@mui/system@7.3.x

To install, run

npx @tessl/cli install tessl/npm-mui--system@7.3.0

index.mddocs/

MUI System

MUI System is a comprehensive CSS-in-JS utility system for React applications that enables rapid custom design implementation through composable style functions, responsive design utilities, and theme-aware styling. It provides a systematic approach to styling with functions for spacing, colors, typography, flexbox, grid, borders, and other CSS properties that can be applied directly to components through props.

Package Information

  • Package Name: @mui/system
  • Package Type: npm
  • Language: TypeScript/JavaScript
  • Installation: npm install @mui/system

Core Imports

import { 
  Box, 
  Container, 
  Grid, 
  Stack,
  createTheme, 
  ThemeProvider, 
  useTheme,
  styled
} from "@mui/system";

For CommonJS:

const { 
  Box, 
  Container, 
  Grid, 
  Stack,
  createTheme, 
  ThemeProvider, 
  useTheme,
  styled 
} = require("@mui/system");

Basic Usage

import { Box, createTheme, ThemeProvider } from "@mui/system";

// Create a theme
const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
    },
  },
  spacing: 8,
});

// Use with Box component
function App() {
  return (
    <ThemeProvider theme={theme}>
      <Box
        sx={{
          width: { xs: '100%', sm: '50%' },
          p: 2,
          backgroundColor: 'primary.main',
          color: 'white',
        }}
      >
        <Box mt={2} mb={1}>
          Hello World
        </Box>
      </Box>
    </ThemeProvider>
  );
}

Architecture

MUI System is built around several key architectural concepts:

  • System Props: Direct CSS-like props that accept theme-aware values and responsive breakpoints
  • sx Prop: Advanced styling prop that supports theme access, responsive values, and pseudo-selectors
  • Theme-Aware Values: All styling props can reference theme values (colors, spacing, breakpoints)
  • Responsive Design: Values can be objects with breakpoint keys for responsive behavior
  • Composable Functions: Style functions can be composed together for reusable styling patterns
  • CSS-in-JS Integration: Seamless integration with emotion and styled-components

Capabilities

Layout Components

Core React components for building layouts with system props support and responsive design capabilities.

// Box - Universal container with all system props
interface BoxProps<Theme = Theme> extends SystemProps<Theme> {
  children?: React.ReactNode;
  sx?: SxProps<Theme>;
  component?: React.ElementType;
}

// Container - Responsive container with max-width constraints
interface ContainerProps<Theme = Theme> {
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
  fixed?: boolean;
  disableGutters?: boolean;
  sx?: SxProps<Theme>;
}

// Grid - Modern CSS Grid layout system
interface GridProps<Theme = Theme> {
  container?: boolean;
  size?: GridSize | ResponsiveStyleValue<GridSize>;
  offset?: GridOffset | ResponsiveStyleValue<GridOffset>;
  spacing?: GridSpacing | ResponsiveStyleValue<GridSpacing>;
  columns?: number | ResponsiveStyleValue<number>;
  sx?: SxProps<Theme>;
}

// Stack - One-dimensional layout with spacing
interface StackProps<Theme = Theme> {
  direction?: 'row' | 'column' | ResponsiveStyleValue<'row' | 'column'>;
  spacing?: number | string | ResponsiveStyleValue<number | string>;
  divider?: React.ReactNode;
  useFlexGap?: boolean;
  sx?: SxProps<Theme>;
}

Layout Components

Theme System

Complete theming system for creating consistent design tokens, providing theme context, and accessing theme values in components.

function createTheme(options?: ThemeOptions, ...args: object[]): Theme;

interface Theme extends CssContainerQueries {
  breakpoints: Breakpoints;
  spacing: Spacing;
  palette: Record<string, any> & { mode: 'light' | 'dark' };
  typography?: Typography;
  shadows?: Shadows;
  shape: Shape;
  direction: Direction;
  mixins?: Mixins;
  transitions?: Transitions;
  zIndex?: ZIndex;
  components?: Record<string, any>;
  applyStyles: ApplyStyles<'light' | 'dark'>;
  unstable_sx: (props: SxProps<Theme>) => CSSObject;
  unstable_sxConfig: SxConfig;
}

function useTheme<T = Theme>(defaultTheme?: T): T;

Theme System

Style Functions

Composable style functions that transform component props into CSS properties with theme integration and responsive support.

// Core style function types
type StyleFunction<Props> = (props: Props) => CSSObject;
type ResponsiveStyleValue<T> = T | { [key in Breakpoint]?: T };

// Main style function categories
const spacing: StyleFunction<SpacingProps>;
const typography: StyleFunction<TypographyProps>;
const borders: StyleFunction<BordersProps>;
const palette: StyleFunction<PaletteProps>;
const sizing: StyleFunction<SizingProps>;
const flexbox: StyleFunction<FlexboxProps>;
const grid: StyleFunction<CssGridProps>;
const positions: StyleFunction<PositionsProps>;
const display: StyleFunction<DisplayProps>;
const shadows: StyleFunction<ShadowsProps>;

Style Functions

Utilities

Color manipulation, breakpoint handling, and other utility functions for advanced theming and responsive design.

// Color manipulation utilities
function alpha(color: string, value: number): string;
function darken(color: string, coefficient: number): string;
function lighten(color: string, coefficient: number): string;
function getContrastRatio(foreground: string, background: string): number;

// Breakpoint utilities
function createBreakpoints(options: BreakpointsOptions): Breakpoints;
function handleBreakpoints<T>(prop: T, transform: (value: any) => any): any;

// Spacing utilities
function createSpacing(spacingInput: SpacingOptions): Spacing;

Utilities

CSS-in-JS Integration

Styled component creation, CSS utilities, and advanced styling patterns with full theme integration.

function styled<Component extends React.ComponentType<any>>(
  component: Component
): CreateMUIStyled;

function createStyled<Theme extends object = Theme>(
  options?: StyledOptions<Theme>
): CreateMUIStyled<Theme>;

// CSS utilities from styled-engine
function css(template: TemplateStringsArray, ...args: any[]): CSSInterpolation;
function keyframes(template: TemplateStringsArray, ...args: any[]): Keyframes;

// Global styles
interface GlobalStylesProps<Theme = Theme> {
  styles: CSSInterpolation | ((theme: Theme) => CSSInterpolation);
  defaultTheme?: Theme;
  themeId?: string;
}

CSS-in-JS Integration

Common Types

// Responsive value wrapper
type ResponsiveStyleValue<T> = T | Partial<Record<Breakpoint, T>>;

// System props (all CSS properties with theme support)
interface SystemProps<Theme = Theme> {
  // Spacing
  m?: ResponsiveStyleValue<number | string>;
  p?: ResponsiveStyleValue<number | string>;
  
  // Colors  
  color?: ResponsiveStyleValue<string>;
  bgcolor?: ResponsiveStyleValue<string>;
  
  // Typography
  fontSize?: ResponsiveStyleValue<number | string>;
  fontWeight?: ResponsiveStyleValue<number | string>;
  
  // Layout
  width?: ResponsiveStyleValue<number | string>;
  height?: ResponsiveStyleValue<number | string>;
  display?: ResponsiveStyleValue<string>;
  
  // And 100+ more CSS properties...
}

// sx prop type
interface SxProps<Theme = Theme> {
  [key: string]: 
    | SystemStyleObject<Theme>
    | ResponsiveStyleValue<SystemStyleObject<Theme>>
    | ((theme: Theme) => SystemStyleObject<Theme>);
}

// Breakpoint keys (extensible via module augmentation)
type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

// Grid specific types  
type GridSize = 'auto' | 'grow' | number | false;
type GridOffset = 'auto' | number;
type GridSpacing = number | string;

// Color object structure
interface ColorObject {
  type: ColorFormat;
  values: number[];
  colorSpace?: string;
}

type ColorFormat = 'rgb' | 'rgba' | 'hsl' | 'hsla' | 'color';