Elastic UI框架(EUI)使用指南：从安装到主题定制

Elastic UI框架(EUI)使用指南：从安装到主题定制

【免费下载链接】eui Elastic UI Framework 🙌 项目地址: https://gitcode.com/gh_mirrors/eu/eui

前言

Elastic UI框架(EUI)是一套由Elastic公司开发的React UI组件库，专为构建现代化、一致性的用户界面而设计。本文将全面介绍如何在项目中集成和使用EUI，涵盖安装、依赖管理、组件使用、主题定制等核心内容。

安装与基础配置

安装步骤

EUI推荐使用yarn进行安装，不支持npm：

yarn add @elastic/eui

对于全新项目，还需要安装peerDependencies：

yarn add @elastic/eui @elastic/eui-theme-borealis @elastic/datemath @emotion/react @emotion/css moment

环境要求

EUI需要项目支持ES2015特性，建议使用babel-polyfill进行兼容性处理。未配置polyfill可能导致某些浏览器环境下出现错误。

核心功能概览

EUI提供了三大类功能资源：

React UI组件库JavaScript辅助服务(services)Jest测试工具集

组件使用

组件采用标准ES模块导入方式：

import {

EuiButton,

EuiCallOut,

EuiPanel,

} from '@elastic/eui';

测试工具

EUI提供了两种测试工具导入方式：

// Enzyme方式

import { findTestSubject } from '@elastic/eui/lib/test';

// React Testing Library方式

import { findByTestSubject, render, screen } from '@elastic/eui/lib/test/rtl';

样式系统深度解析

CSS-in-JS实现

EUI采用Emotion库实现CSS-in-JS方案，推荐使用css函数：

import { css } from '@emotion/react';

const styles = css`

color: red;

font-size: 16px;

`;

要使css拼接功能正常工作，需要配置Babel预设：

{

"presets": ["@emotion/babel-preset-css-prop"]

}

主题系统详解

基础配置

EUI主题系统同样基于Emotion实现，需要在应用顶层包裹EuiProvider：

import { EuiProvider } from '@elastic/eui';

function App() {

return (

{/* 应用内容 */}

);

}

主题变量使用

通过useEuiTheme钩子可以访问所有主题变量：

import { useEuiTheme } from '@elastic/eui';

function ThemedComponent() {

const { euiTheme } = useEuiTheme();

const styles = css`

color: ${euiTheme.colors.primary};

padding: ${euiTheme.size.l};

`;

return