CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

css-in-js.mddocs/

CSS-in-JS Integration

Styled component creation, CSS utilities, and advanced styling patterns with full theme integration. This system provides powerful CSS-in-JS capabilities while maintaining theme consistency and developer experience.

Capabilities

Styled Component API

Create styled React components with theme integration and advanced styling capabilities.

/**
 * Main styled component API with theme integration
 */
declare const styled: CreateMUIStyled;

/**
 * Styled component creation interface
 */
interface CreateMUIStyled {
  /** Create styled component from HTML element */
  <Tag extends keyof HTMLElementTagNameMap>(
    tag: Tag
  ): StyledComponent<Tag, {}, Theme>;
  
  /** Create styled component from React component */
  <Component extends React.ComponentType<any>>(
    component: Component
  ): StyledComponent<Component, {}, Theme>;
  
  /** Create styled component with options */
  <Tag extends keyof HTMLElementTagNameMap>(
    tag: Tag,
    options: StyledOptions
  ): StyledComponent<Tag, {}, Theme>;
  
  <Component extends React.ComponentType<any>>(
    component: Component,
    options: StyledOptions
  ): StyledComponent<Component, {}, Theme>;
}

/**
 * Styled component type
 */
interface StyledComponent<
  Component extends React.ElementType,
  Props = {},
  Theme = Theme
> extends React.ComponentType<Props & MUIStyledCommonProps<Theme>> {
  /** Apply additional styles */
  <AdditionalProps = {}>(
    styles: 
      | CSSInterpolation 
      | ((props: Props & AdditionalProps & { theme: Theme }) => CSSInterpolation)
  ): StyledComponent<Component, Props & AdditionalProps, Theme>;
}

/**
 * Common props for all styled components
 */
interface MUIStyledCommonProps<Theme = Theme> {
  /** Advanced styling with theme access */
  sx?: SxProps<Theme>;
  
  /** CSS class name */
  className?: string;
  
  /** All system props */
  [key: string]: any;
}

/**
 * Styling options for styled components
 */
interface StyledOptions {
  /** Display name for debugging */
  name?: string;
  
  /** Component identifier */
  slot?: string;
  
  /** Skip theme integration */
  skipTheme?: boolean;
  
  /** Skip sx prop processing */
  skipSx?: boolean;
  
  /** Custom prop filtering */
  shouldForwardProp?: (prop: string) => boolean;
}

/**
 * Utility function for prop filtering
 * @param prop - Prop name to check
 * @returns True if prop should be forwarded to DOM
 */
function shouldForwardProp(prop: string): boolean;

Usage Examples:

import { styled } from "@mui/system";

// Basic styled component
const StyledButton = styled('button')({
  backgroundColor: 'blue',
  color: 'white',
  padding: '8px 16px',
  border: 'none',
  borderRadius: '4px',
});

// Styled component with theme access
const ThemedBox = styled('div')(({ theme }) => ({
  backgroundColor: theme.palette.primary.main,
  padding: theme.spacing(2),
  [theme.breakpoints.up('md')]: {
    padding: theme.spacing(3),
  },
}));

// Styled component with props
const FlexContainer = styled('div')<{ direction?: 'row' | 'column' }>(
  ({ theme, direction = 'row' }) => ({
    display: 'flex',
    flexDirection: direction,
    gap: theme.spacing(1),
  })
);

// Using with existing component
import { Box } from "@mui/system";

const StyledBox = styled(Box)(({ theme }) => ({
  backgroundColor: theme.palette.background.paper,
  borderRadius: theme.shape.borderRadius,
}));

// With styling options
const CustomComponent = styled('div', {
  name: 'MyCustomComponent',
  slot: 'Root',
  shouldForwardProp: (prop) => prop !== 'customProp',
})<{ customProp?: boolean }>(({ theme, customProp }) => ({
  color: customProp ? theme.palette.primary.main : theme.palette.text.primary,
}));

Styled Component Factory

Create custom styled functions with specific theme types and configurations.

/**
 * Factory for creating custom styled functions
 * @param options - Styled creation options
 * @returns Custom styled function
 */
function createStyled<Theme extends object = Theme>(
  options?: StyledEngineOptions<Theme>
): CreateMUIStyled<Theme>;

interface StyledEngineOptions<Theme> {
  /** Default theme object */
  defaultTheme?: Theme;
  
  /** Theme identifier */
  themeId?: string;
  
  /** Root CSS class */
  rootShouldForwardProp?: (prop: string) => boolean;
}

/**
 * Custom styled function with specific theme
 */
interface CreateMUIStyled<Theme = Theme> {
  <Tag extends keyof HTMLElementTagNameMap>(
    tag: Tag
  ): StyledComponent<Tag, {}, Theme>;
  
  <Component extends React.ComponentType<any>>(
    component: Component
  ): StyledComponent<Component, {}, Theme>;
}

Usage Examples:

import { createStyled } from "@mui/system";

// Custom theme type
interface CustomTheme {
  colors: {
    primary: string;
    secondary: string;
  };
  spacing: (value: number) => string;
}

// Create styled function with custom theme
const customStyled = createStyled<CustomTheme>({
  defaultTheme: {
    colors: {
      primary: '#1976d2',
      secondary: '#dc004e',
    },
    spacing: (value) => `${value * 8}px`,
  },
});

// Use custom styled function
const CustomButton = customStyled('button')(({ theme }) => ({
  backgroundColor: theme.colors.primary,
  padding: theme.spacing(1),
}));

CSS Utilities (Re-exported)

Core CSS-in-JS utilities from the styled engine for advanced styling patterns.

/**
 * CSS template literal function for writing CSS
 * @param template - Template string array
 * @param interpolations - CSS interpolations
 * @returns CSS interpolation object
 */
function css(
  template: TemplateStringsArray,
  ...interpolations: CSSInterpolation[]
): CSSInterpolation;

/**
 * CSS keyframes function for animations
 * @param template - Template string array
 * @param interpolations - CSS interpolations
 * @returns Keyframes object
 */
function keyframes(
  template: TemplateStringsArray,
  ...interpolations: CSSInterpolation[]
): Keyframes;

/**
 * CSS interpolation types
 */
type CSSInterpolation = 
  | CSSObject 
  | string 
  | number 
  | false 
  | null 
  | undefined
  | CSSInterpolation[];

/**
 * CSS object type
 */
interface CSSObject {
  [property: string]: 
    | string 
    | number 
    | CSSObject 
    | undefined
    | null;
}

/**
 * Keyframes type for animations
 */
interface Keyframes {
  name: string;
  styles: string;
}

Usage Examples:

import { css, keyframes, styled } from "@mui/system";

// Using css function
const baseStyles = css`
  display: flex;
  align-items: center;
  padding: 16px;
`;

// Creating keyframes
const fadeIn = keyframes`
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
`;

// Using in styled component
const AnimatedBox = styled('div')`
  ${baseStyles}
  animation: ${fadeIn} 0.3s ease-in-out;
`;

// Mixed object and template literal styles
const MixedStyledComponent = styled('div')(
  ({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
  }),
  css`
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  `
);

Styling Engine Provider

Configure the CSS-in-JS engine (emotion or styled-components) for the entire application.

/**
 * Provider for configuring the styling engine
 */
declare const StyledEngineProvider: React.ComponentType<StyledEngineProviderProps>;

interface StyledEngineProviderProps {
  /** Child components */
  children: React.ReactNode;
  
  /** Styled engine instance */
  injectFirst?: boolean;
  
  /** Cache configuration (emotion-specific) */
  cache?: any;
}

Usage Examples:

import { StyledEngineProvider } from "@mui/system";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";

// Emotion cache configuration
const cache = createCache({
  key: 'mui',
  prepend: true,
});

function App() {
  return (
    <StyledEngineProvider injectFirst>
      <CacheProvider value={cache}>
        {/* Your app components */}
      </CacheProvider>
    </StyledEngineProvider>
  );
}

Global Styles

Inject global CSS styles into the document with theme integration.

/**
 * Component for injecting global CSS styles
 */
declare const GlobalStyles: React.ComponentType<GlobalStylesProps>;

interface GlobalStylesProps<Theme = Theme> {
  /** Global styles to inject */
  styles: 
    | CSSInterpolation 
    | ((theme: Theme) => CSSInterpolation);
  
  /** Default theme if no ThemeProvider */
  defaultTheme?: Theme;
  
  /** Theme identifier */
  themeId?: string;
}

Usage Examples:

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

const theme = createTheme();

// Basic global styles
<GlobalStyles
  styles={{
    body: {
      margin: 0,
      fontFamily: 'Roboto, sans-serif',
    },
  }}
/>

// Global styles with theme access
<ThemeProvider theme={theme}>
  <GlobalStyles
    styles={(theme) => ({
      '*': {
        boxSizing: 'border-box',
      },
      body: {
        margin: 0,
        backgroundColor: theme.palette.background.default,
        color: theme.palette.text.primary,
      },
      '#root': {
        minHeight: '100vh',
      },
    })}
  />
</ThemeProvider>

// CSS template literal global styles
<GlobalStyles
  styles={css`
    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
    
    html {
      font-size: 16px;
      line-height: 1.5;
    }
    
    * {
      box-sizing: border-box;
    }
  `}
/>

Component Factory Functions

Factory functions for creating custom components with built-in system props and theme integration.

/**
 * Create custom Box component with theme integration
 * @param options - Box creation options
 * @returns Custom Box component
 */
function createBox<Theme extends object = Theme>(
  options?: CreateBoxOptions<Theme>
): React.ComponentType<BoxProps<Theme>>;

interface CreateBoxOptions<Theme = Theme> {
  /** Theme identifier for accessing nested themes */
  themeId?: string;
  
  /** Default theme if no ThemeProvider exists */
  defaultTheme?: Theme;
  
  /** Default CSS class name */
  defaultClassName?: string;
  
  /** Custom class name generation function */
  generateClassName?: (className: string) => string;
}

/**
 * Create custom Container component with responsive behavior
 * @param options - Container creation options
 * @returns Custom Container component
 */
function createContainer<Theme extends object = Theme>(
  options?: CreateContainerOptions<Theme>
): React.ComponentType<ContainerProps<Theme>>;

interface CreateContainerOptions<Theme = Theme> {
  /** Theme identifier for accessing nested themes */
  themeId?: string;
  
  /** Default theme if no ThemeProvider exists */
  defaultTheme?: Theme;
  
  /** Default CSS class name */
  defaultClassName?: string;
  
  /** Custom class name generation function */
  generateClassName?: (className: string) => string;
  
  /** Default maximum width breakpoints */
  defaultMaxWidths?: Record<string, string | number>;
  
  /** Whether to disable gutters by default */
  defaultDisableGutters?: boolean;
}

/**
 * Create custom styled engine with specific configuration
 * @param options - Styled engine options
 * @returns Custom styled function
 */
function createStyled<Theme extends object = Theme>(
  options?: StyledOptions<Theme>
): CreateMUIStyled<Theme>;

interface StyledOptions<Theme = Theme> {
  /** Default theme */
  defaultTheme?: Theme;
  
  /** Theme identifier */
  themeId?: string;
  
  /** Root CSS class selector */
  rootShouldForwardProp?: (prop: string) => boolean;
  
  /** Product name for class generation */
  productionPrefix?: string[];
}

// Component props interfaces
interface BoxProps<Theme = Theme> extends SystemProps<Theme> {
  children?: React.ReactNode;
  component?: React.ElementType;
  sx?: SxProps<Theme>;
}

interface ContainerProps<Theme = Theme> {
  children?: React.ReactNode;
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
  fixed?: boolean;
  disableGutters?: boolean;
  component?: React.ElementType;
  sx?: SxProps<Theme>;
}

Usage Examples:

import { createBox, createContainer, createStyled } from "@mui/system";

// Create custom Box component
const CustomBox = createBox({
  defaultClassName: 'MyBox-root',
  generateClassName: (className) => `custom-${className}`,
});

// Create themed Container component
const ThemedContainer = createContainer({
  themeId: 'custom',
  defaultMaxWidths: {
    xs: '100%',
    sm: '540px',
    md: '720px',
    lg: '960px',
    xl: '1140px',
  },
});

// Create custom styled function
const myStyled = createStyled({
  productionPrefix: ['my', 'app'],
  rootShouldForwardProp: (prop) => prop !== 'variant',
});

// Using the custom factories
function MyComponent() {
  return (
    <ThemedContainer maxWidth="lg">
      <CustomBox
        sx={{
          p: 2,
          bgcolor: 'primary.main',
          color: 'primary.contrastText',
        }}
      >
        Custom themed components
      </CustomBox>
    </ThemedContainer>
  );
}

// Styled component with custom factory
const StyledButton = myStyled('button')(({ theme, variant }) => ({
  padding: theme.spacing(1, 2),
  borderRadius: theme.shape.borderRadius,
  backgroundColor: variant === 'primary' ? theme.palette.primary.main : 'transparent',
  color: variant === 'primary' ? theme.palette.primary.contrastText : theme.palette.text.primary,
  border: variant === 'outlined' ? `1px solid ${theme.palette.divider}` : 'none',
  '&:hover': {
    opacity: 0.8,
  },
}));

Advanced Styling Patterns

Advanced patterns for complex styling scenarios and optimizations.

/**
 * sx prop processor function (internal)
 */
function unstable_styleFunctionSx(props: { 
  sx: SxProps; 
  theme: Theme; 
}): CSSObject;

/**
 * Create custom sx processor
 * @param config - sx configuration
 * @returns Custom sx processor function
 */
function unstable_createStyleFunctionSx(
  config?: SxConfig
): typeof unstable_styleFunctionSx;

/**
 * Extend sx prop functionality
 * @param sxProp - Original sx prop
 * @param extensions - Additional sx properties
 * @returns Extended sx prop
 */
function unstable_extendSxProp(
  sxProp: SxProps,
  extensions: SxProps
): SxProps;

/**
 * Default sx configuration
 */
const unstable_defaultSxConfig: SxConfig;

/**
 * sx prop configuration interface
 */
interface SxConfig {
  [property: string]: {
    cssProperty?: string | string[];
    themeKey?: string;
    transform?: TransformFunction;
    style?: StyleFunction<any>;
  };
}

Component Box Creation

Create custom Box-like components with system props support.

/**
 * Create custom Box component
 * @param options - Box creation options
 * @returns Custom Box component
 */
function createBox<Theme extends object = Theme>(
  options?: CreateBoxOptions<Theme>
): React.ComponentType<BoxProps>;

interface CreateBoxOptions<Theme> {
  /** Default theme */
  defaultTheme?: Theme;
  
  /** Component class name */
  defaultClassName?: string;
  
  /** Theme identifier */
  themeId?: string;
}

/**
 * Default Box component with system props
 */
declare const Box: React.ComponentType<BoxProps>;

Usage Examples:

import { createBox } from "@mui/system";

// Custom Box with specific theme
const CustomBox = createBox({
  defaultTheme: customTheme,
  defaultClassName: 'MyCustomBox',
});

// Usage
<CustomBox
  p={2}
  bgcolor="primary.main"
  sx={{
    borderRadius: 1,
    '&:hover': {
      transform: 'scale(1.05)',
    },
  }}
>
  Custom box content
</CustomBox>

Integration Patterns

CSS-in-JS integration works seamlessly with:

  • Theme System: Automatic theme access in all styled components
  • System Props: Full system props support in styled components
  • sx Prop: Advanced styling capabilities with theme integration
  • Responsive Design: Breakpoint-aware styling in all CSS-in-JS patterns
  • TypeScript: Complete type safety for styled components and CSS properties
  • Performance: Optimized CSS generation and caching strategies

docs

components.md

css-in-js.md

index.md

style-functions.md

theme-system.md

utilities.md

tile.json