介绍

Evergreen是一个React的开源UI组件库，代码托管在Github上，截止目前已经收获了近11k的stars，可以说已经是相当的高了！

Github

https://github.com/segmentio/evergreen/

特性

• 开箱即用：Evergreen 包含一组开箱即用的精美 React 组件；
• 灵活性： Evergreen 组件建立在 React UI Primitive 基础上，以实现无限的可组合性。
• 企业级： Evergreen 为企业级 Web 应用程序提供 UI 设计语言。
• 开放源代码：Apache 2.0 license

安装使用

Evergreen 由多个组件和工具组成，可以一一导入。首先安装evergreen-ui包，你可以使用你喜欢的工具进行安装，比如yarn或者npm：

React版本：react@16.8.0 and react-dom@16.8.0

yarn add evergreen-ui
# 或者
npm install --save evergreen-ui

最简单示例：

import React from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'evergreen-ui'

ReactDOM.render(I am using  Evergreen!, document.getElementById('root'))

引入组件并使用在你的项目中

import { Button, Pane, Text, majorScale } from 'evergreen-ui'

  点我
  这是一个可点击的按钮

主题系统

Evergreen 附带一个全新的、可扩展的主题架构，让用户可以根据需要，自定义 Evergreen 中组件的外观和体验。可以针对每个组件的任意样式和状态，以实现最大的灵活性

Evergreen 有两个自带主题：

一个是经典主题，另一个是默认主题：

  
    
      Using Default Theme
       {}}>
        Confirm
      
      
      
    
  
  
    
      Using Classic Theme
       {}}>
        Confirm
      
      
      
    
  

下面这些都是可以自定义主题对象

export default {
  colors,
  fills,
  intents,
  radii,
  shadows,
  fontFamilies: {
    display: '...',
    ui: '...',
    mono: '...',
  },
  fontSizes: {},
  fontWeights: {},
  letterSpacings: {},
  lineHeights: [],
  zIndices,
  components: {
    Alert: {},
    Avatar: {},
    Badge: {},
    Button: {},
    Card: {},
    Checkbox: {},
    Code: {},
    DialogBody: {},
    DialogFooter: {},
    DialogHeader: {},
    Group: {},
    Heading: {},
    Icon: {},
    InlineAlert: {},
    Input: {},
    Label: {},
    List: {},
    Link: {},
    MenuItem: {},
    Option: {},
    Pane: {},
    Paragraph: {},
    Radio: {},
    Select: {},
    Spinner: {},
    Switch: {},
    Tab: {},
    Table: {},
    TableCell: {},
    TableHead: {},
    TableRow: {},
    TagInput: {},
    Text: {},
    TextDropdownButton: {},
    Tooltip: {},
  },
};

组件截图

为了更直观感受下Evergreen，通过截图的方式向大家展示下Evergreen UI

总结

React的生态相对来说还是比较丰富的，特别是国内有大厂开源的企业级Ant Desigin设计语言。Evergreen也是一个不错的React组件，也是极大地丰富的React生态，对于项目来说也是多了一个选择！