大设计

BigDeign React 组件.

文档

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

快速启动指南

在您的工程中使用大设计和样式组件@ 6 npm数字 :

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

或带有 pnpm数字 :

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

添加字体为 a <link> 在你身边 index.html编号 :<head> 键.

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@200;300;400;600&display=swap" rel="stylesheet" />
</head>

如果使用 Next.js,请使用 next/fonts/google 导入 :

import { Source_Sans_3 } from 'next/font/google';

const sourceSans3 = Source_Sans_3({
  display: 'swap',
  weight: ["200", "300", "400", "600"],
  subsets: ['latin'],
});

见 https://nextjs.org/docs/app/api-reference/组件/font 关于如何应用字体的更详细信息.

导入 GlobalStyles 组件并在您的应用程序中使用一次。 这将在全球设置一些风格 添加 常规.cs我们建议将其贴近 您的根组件。 然后导入任何组件, 例如 Button把它用在应用程序的任何地方.

import { Button, GlobalStyles } from '@bigcommerce/big-design';

// ...

<App>
  <GlobalStyles />
  <Button>Click me</Button>
</App>

版本支持