Geist UI

安装

配置

请确认你的 NodeJS 处于最新版本，并已有包管理器: NPM 或是 Yarn。

此外，Geist 是基于 React 框架的组件库，这意味着您也必须了解如何创建项目与框架基础知识。

安装依赖

yarn add @geist-ui/core

添加引用

/src/app.js

import { GeistProvider, CssBaseline } from '@geist-ui/core'

export default () => (
  <GeistProvider>
    <CssBaseline /> // --> 基础样式
    <AppComponent /> // --> 你的根组件
  </GeistProvider>
)

使用组件

import { Button, Page, Text } from '@geist-ui/core'

const Home = () => (
  <Page>
    <Text h1>Home Page</Text>
    <Button>Submit</Button>
  </Page>
)

CRA 项目

create-react-app 是创建 React 项目最常见的脚手架，它可以大幅度减少用户配置工具链的时间。对于所有 CRA 类项目，用户都不用做任何配置变更，只需引入组件库即可。

此外，这里有一个在 CRA 上使用 Geist 的完整项目示例供作参考。

Next.js 项目

Next.js 是一个 React 服务端渲染框架。在 Next.js 上使用 Geist 需要定制 _app.jsx 文件，项目初始化完成后，可在 /pages 文件夹下添加 /pages/_app.jsx 文件并补充下述内容。

pages/_app.jsx

import { GeistProvider, CssBaseline } from '@geist-ui/core'

const App = ({ Component, pageProps }) => {
  return (
    <GeistProvider>
      <CssBaseline />
      <Component {...pageProps} />
    </GeistProvider>
  )
}

export default App

如果你需要在 Next.js 项目中应用服务端渲染，请参考服务端渲染小节完成配置。

此外，我们也提供了一个完整的 Next.js 应用示例以供参考。

在 Windows 上渲染字体 [可选的]

Web 应用中的一些字体在 Windows 平台上无法得到最好的渲染效果，或是你认为一些字符集没有得到最好的渲染 (如中文字符)，在这类场景下，你可以额外引入字体库来优化渲染效果：

不需要修改任何 CSS 文件或是声明字体。

安装 `inter-ui`

yarn add inter-ui

添加 `Inter Font` 到你的项目中:

import 'inter-ui/inter.css'

安装

配置