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.

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

MUI System

Name: tessl/npm-mui--system
Author: tessl

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';