create-static-styles.en-US

Introduction#

createStaticStyles is a high-performance style creation function. The main differences from createStyles are:

Non-Hook: Returns style object directly, not a React Hook
Zero Runtime Overhead: Styles are computed once at module import
CSS Variables: Uses antd's CSS variables through cssVar

Basic Usage#

import { createStaticStyles } from 'antd-style';

// Module-level definition, styles computed once at import
const styles = createStaticStyles(({ css, cssVar }) => ({
  container: css`
    padding: 16px;
    background: ${cssVar.colorBgContainer};
    border: 1px solid ${cssVar.colorBorder};
    border-radius: ${cssVar.borderRadius};
  `,
  title: css`
    font-size: 18px;
    color: ${cssVar.colorText};
  `,
}));

// Use directly in components, no Hook call needed
const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello</h1>
    </div>
  );
};

Comparison with createStyles#

Feature	createStyles	createStaticStyles
Return Value	Hook	Style Object
token (JS values)	✅	❌
cssVar (CSS variables)	✅	✅
customToken	✅	❌
stylish	✅	❌
responsive	✅ (dynamic)	✅ (fixed breakpoints)
props parameter	✅	❌
isDarkMode	✅	❌
Hooks count	8+	0
Performance overhead	High	Near Zero

API#

StaticStyleUtils#

The parameter function of createStaticStyles receives a utility object with the following properties:

Property	Type	Description
css	`CssUtil`	CSS template function, converts styles to className
cx	`ClassNamesUtil`	Merges multiple classNames
cssVar	`CSSVarMap`	antd CSS variable mapping
responsive	`StaticResponsiveMap`	Responsive breakpoint mapping

cssVar#

CSS variable mapping object that converts antd tokens to corresponding CSS variable format.

import { cssVar } from 'antd-style';

// cssVar.colorPrimary => 'var(--ant-color-primary)'
// cssVar.colorBgContainer => 'var(--ant-color-bg-container)'
// cssVar.borderRadius => 'var(--ant-border-radius)'

responsive#

Fixed responsive breakpoint mapping:

import { responsive } from 'antd-style';

// responsive.xs => '@media (max-width: 479.98px)'
// responsive.sm => '@media (max-width: 575.98px)'
// responsive.md => '@media (max-width: 767.98px)'
// responsive.lg => '@media (max-width: 991.98px)'
// responsive.xl => '@media (max-width: 1199.98px)'
// responsive.xxl => '@media (min-width: 1200px)'

Usage Examples#

Responsive Layout#

const styles = createStaticStyles(({ css, responsive }) => ({
  layout: css`
    display: flex;
    flex-direction: row;
    gap: 16px;

    ${responsive.md} {
      flex-direction: column;
    }

    ${responsive.sm} {
      padding: 8px;
    }
  `,
}));

Merging classNames#

const styles = createStaticStyles(({ css, cx }) => {
  const baseButton = css`
    padding: 8px 16px;
    border-radius: 4px;
  `;

  const primaryButton = css`
    background: blue;
    color: white;
  `;

  return {
    button: cx(baseButton, primaryButton),
  };
});

Use Cases#

Recommended#

Pure UI Component Styles: Components that don't depend on dynamic token values
Layout Styles: Spacing, border-radius, etc. using CSS variables
High-frequency Rendering Components: List items, table cells, and other performance-sensitive scenarios
Many Components: Pages with many styled components

Not Recommended#

Need custom tokens
Need JS-computed styles (e.g., token.colorPrimary + '80')
Need dynamic styles based on props
Need stylish presets
Need isDarkMode for conditional logic

createStaticStylesFactory#

If your application uses a custom CSS variable prefix (e.g., via ConfigProvider's prefixCls configuration), you can use createStaticStylesFactory to create a custom instance.

Basic Usage#

import { createStaticStylesFactory } from 'antd-style';

// Create instance with custom prefix
const { createStaticStyles, cssVar, responsive } = createStaticStylesFactory({
  prefix: 'my-app',
});

// cssVar.colorPrimary => 'var(--my-app-color-primary)'
// cssVar.colorBgContainer => 'var(--my-app-color-bg-container)'

const styles = createStaticStyles(({ css, cssVar }) => ({
  container: css`
    background: ${cssVar.colorBgContainer};
  `,
}));

Configuration Options#

Parameter	Type	Default	Description
prefix	`string`	`'ant'`	CSS variable prefix
hashPriority	`HashPriority`	`'high'`	Style hash priority

Integration with createInstance#

If you use createInstance to create a custom instance, static styles will automatically use the configured prefixCls:

import { createInstance } from 'antd-style';

const { createStaticStyles, cssVar } = createInstance({
  prefixCls: 'my-app',
});

// cssVar will automatically use 'my-app' prefix
// cssVar.colorPrimary => 'var(--my-app-color-primary)'

Performance Notes#

createStaticStyles has the following performance advantages over createStyles:

Zero Hooks Calls: No Hook calls during component rendering
Module-level Caching: Styles computed only once at module import
No useMemo Overhead: No memoization computation needed

For performance-sensitive scenarios, consider using createStaticStyles first.

Introduction#

createStaticStyles is a high-performance style creation function. The main differences from createStyles are:

Non-Hook: Returns style object directly, not a React Hook
Zero Runtime Overhead: Styles are computed once at module import
CSS Variables: Uses antd's CSS variables through cssVar

Basic Usage#

import { createStaticStyles } from 'antd-style';

// Module-level definition, styles computed once at import
const styles = createStaticStyles(({ css, cssVar }) => ({
  container: css`
    padding: 16px;
    background: ${cssVar.colorBgContainer};
    border: 1px solid ${cssVar.colorBorder};
    border-radius: ${cssVar.borderRadius};
  `,
  title: css`
    font-size: 18px;
    color: ${cssVar.colorText};
  `,
}));

// Use directly in components, no Hook call needed
const MyComponent = () => {
  return (
    <div className={styles.container}>
      <h1 className={styles.title}>Hello</h1>
    </div>
  );
};

Comparison with createStyles#

Feature	createStyles	createStaticStyles
Return Value	Hook	Style Object
token (JS values)	✅	❌
cssVar (CSS variables)	✅	✅
customToken	✅	❌
stylish	✅	❌
responsive	✅ (dynamic)	✅ (fixed breakpoints)
props parameter	✅	❌
isDarkMode	✅	❌
Hooks count	8+	0
Performance overhead	High	Near Zero

API#

StaticStyleUtils#

The parameter function of createStaticStyles receives a utility object with the following properties:

Property	Type	Description
css	`CssUtil`	CSS template function, converts styles to className
cx	`ClassNamesUtil`	Merges multiple classNames
cssVar	`CSSVarMap`	antd CSS variable mapping
responsive	`StaticResponsiveMap`	Responsive breakpoint mapping

cssVar#

CSS variable mapping object that converts antd tokens to corresponding CSS variable format.

import { cssVar } from 'antd-style';

// cssVar.colorPrimary => 'var(--ant-color-primary)'
// cssVar.colorBgContainer => 'var(--ant-color-bg-container)'
// cssVar.borderRadius => 'var(--ant-border-radius)'

responsive#

Fixed responsive breakpoint mapping:

import { responsive } from 'antd-style';

// responsive.xs => '@media (max-width: 479.98px)'
// responsive.sm => '@media (max-width: 575.98px)'
// responsive.md => '@media (max-width: 767.98px)'
// responsive.lg => '@media (max-width: 991.98px)'
// responsive.xl => '@media (max-width: 1199.98px)'
// responsive.xxl => '@media (min-width: 1200px)'

Usage Examples#

Responsive Layout#

const styles = createStaticStyles(({ css, responsive }) => ({
  layout: css`
    display: flex;
    flex-direction: row;
    gap: 16px;

    ${responsive.md} {
      flex-direction: column;
    }

    ${responsive.sm} {
      padding: 8px;
    }
  `,
}));

Merging classNames#

const styles = createStaticStyles(({ css, cx }) => {
  const baseButton = css`
    padding: 8px 16px;
    border-radius: 4px;
  `;

  const primaryButton = css`
    background: blue;
    color: white;
  `;

  return {
    button: cx(baseButton, primaryButton),
  };
});

Use Cases#

Recommended#

Pure UI Component Styles: Components that don't depend on dynamic token values
Layout Styles: Spacing, border-radius, etc. using CSS variables
High-frequency Rendering Components: List items, table cells, and other performance-sensitive scenarios
Many Components: Pages with many styled components

Not Recommended#

Need custom tokens
Need JS-computed styles (e.g., token.colorPrimary + '80')
Need dynamic styles based on props
Need stylish presets
Need isDarkMode for conditional logic

createStaticStylesFactory#

If your application uses a custom CSS variable prefix (e.g., via ConfigProvider's prefixCls configuration), you can use createStaticStylesFactory to create a custom instance.

Basic Usage#

import { createStaticStylesFactory } from 'antd-style';

// Create instance with custom prefix
const { createStaticStyles, cssVar, responsive } = createStaticStylesFactory({
  prefix: 'my-app',
});

// cssVar.colorPrimary => 'var(--my-app-color-primary)'
// cssVar.colorBgContainer => 'var(--my-app-color-bg-container)'

const styles = createStaticStyles(({ css, cssVar }) => ({
  container: css`
    background: ${cssVar.colorBgContainer};
  `,
}));

Configuration Options#

Parameter	Type	Default	Description
prefix	`string`	`'ant'`	CSS variable prefix
hashPriority	`HashPriority`	`'high'`	Style hash priority

Integration with createInstance#

If you use createInstance to create a custom instance, static styles will automatically use the configured prefixCls:

import { createInstance } from 'antd-style';

const { createStaticStyles, cssVar } = createInstance({
  prefixCls: 'my-app',
});

// cssVar will automatically use 'my-app' prefix
// cssVar.colorPrimary => 'var(--my-app-color-primary)'

Performance Notes#

createStaticStyles has the following performance advantages over createStyles:

Zero Hooks Calls: No Hook calls during component rendering
Module-level Caching: Styles computed only once at module import
No useMemo Overhead: No memoization computation needed

For performance-sensitive scenarios, consider using createStaticStyles first.