大设计 主题

大设计设计系统.

文档

你可以找到我们 文档页面。 。 。 .

说明

大设计 组件默认使用此主题. 本套件仅用于需要更高级特性时,例如:

• 当应用程序使用 html 字体大小不同于 16px。 。 。 .
• 创建全新的主题.
• 打字记字.

快速启动指南

在您的工程中添加大设计主题和样式组件@ 6 npm数字 :

npm install @bigcommerce/big-design-theme styled-components@6

或带有 pnpm数字 :

pnpm add @bigcommerce/big-design-theme styled-components@6

// index.tsx

import { theme } from '@bigcommerce/big-design-theme';
import { ThemeProvider } from 'styled-components';

// ...

ReactDOM.render(
  <ThemeProvider theme={theme}>
      <App />
  </ThemeProvider>,
  document.getElementById('root'),
);

使用不同的 html 字体大小

当您的应用程序使用 html 字体大小不同于 16px 您需要创建一个使用新主题的新主题 您的应用程序的 html 字体大小在内部可以计算间隔和大小 .

以下示例显示如何使用 14px html 字体大小并向您的应用程序提供主题 .

import { createTheme } from '@bigcommerce/big-design-theme';
import { ThemeProvider } from 'styled-components';

const theme = createTheme({ htmlFontSize: 14 });

// ...

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;