Elastic EUI项目中使用Emotion编写样式的完整指南

Elastic EUI项目中使用Emotion编写样式的完整指南

eui Elastic UI Framework 🙌 项目地址: https://gitcode.com/gh_mirrors/eu/eui

前言

在Elastic EUI项目中，样式系统采用了Emotion这一现代化的CSS-in-JS解决方案。本文将深入探讨如何在EUI组件开发中高效使用Emotion编写样式，涵盖最佳实践、常见模式以及技术细节。

基础文件结构

样式文件规范

每个组件通常包含两个关键文件：

• {组件名}.styles.ts - 存放样式逻辑
• {组件名}.tsx - 组件实现

样式文件的基本结构如下：

import { css } from '@emotion/react';
import { UseEuiTheme } from '../../services';

export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => {
  return {
    euiComponentName: css`
      color: ${euiTheme.colors.textPrimary};
    `,
  };
};

组件实现示例

import { useEuiTheme } from '../../services';
import { euiComponentNameStyles } from './{组件名}.styles.ts';

export const EuiComponent = () => {
  const theme = useEuiTheme();
  const styles = euiComponentNameStyles(theme);
  const cssStyles = [styles.euiComponentName];

  return <div css={cssStyles} />;
};

样式组织策略

1. 样式数组构建

使用数组组织样式是Emotion的最佳实践，即使只有一个样式对象也应采用数组形式：

const cssStyles = [
  styles.base,         // 基础样式
  styles[size],        // 尺寸相关样式
  styles[type],       // 类型相关样式
  isDisabled && styles.disabled // 条件样式
];

2. 子元素样式处理

对于组件内部的子元素，推荐采用以下模式：

export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({
  euiComponentName: css``,
  euiComponentName__child: css``
});

在组件中使用时：

const cssStyles = [styles.euiComponentName];
const cssChildStyles = [styles.euiComponentName__child];

3. 样式合并技巧

当处理子组件样式时，必须手动合并传入的样式：

const cssIconStyles = [styles.icon, iconProps?.css];

高级样式模式

1. 样式映射表

对于基于枚举值的样式，建立映射表是高效的做法：

const sizeMap = {
  s: 'm',
  m: 'base',
  l: 'l'
};

export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({
  s: css`
    width: ${euiTheme.size[sizeMap.s]};
  `,
  m: css`
    width: ${euiTheme.size[sizeMap.m]};
  `
});

2. 样式辅助函数

对于重复的样式模式，可以提取为辅助函数：

const _sizeHelper = (size: string, fontSize: string) => `
  width: ${size};
  height: ${size};
  font-size: ${fontSize};
`;

export const euiComponentNameStyles = ({ euiTheme }: UseEuiTheme) => ({
  s: css(_sizeHelper(euiTheme.size.l, euiTheme.size.m)),
  m: css(_sizeHelper(euiTheme.size.xl, euiTheme.size.base))
});

3. 条件样式处理

推荐使用三元表达式而非短路运算符：

css`
  ${font.body.letterSpacing 
    ? `letter-spacing: ${font.body.letterSpacing}`
    : ''}
`

特殊场景处理

1. 重复样式优化

对于重复的样式定义，可以使用JS getter：

export const euiComponentNameStyles = () => ({
  s: css`/* 复杂样式 */`,
  get m() { return this.s; },
  l: css`/* 不同样式 */`
});

2. 颜色模式特定组件

对于依赖特定颜色模式的组件，采用包装器模式：

const _EuiComponent = (props) => {
  /* 组件实现 */
};

export const EuiComponent = (props) => {
  return (
    <EuiThemeProvider colorMode={colorMode}>
      <_EuiComponent {...props} />
    </EuiThemeProvider>
  );
};

样式变量策略

1. JS样式变量

大多数组件特定变量应保持在JS中：

const componentVars = {
  padding: euiTheme.size.l,
  margin: euiTheme.size.xl
};

2. CSS变量使用场景

仅在以下情况使用CSS变量：

• 需要全局访问的样式值
• 多个组件需要动态响应变化的样式
• 需要减少JS逻辑传递的场景

css`
  --euiHeaderHeight: ${heightCalculated};
`

总结

在Elastic EUI项目中使用Emotion编写样式时，关键要掌握：

1. 合理的文件组织和结构
2. 样式数组的构建方式
3. 子元素样式的正确处理
4. 各种高级样式模式的适用场景
5. 特殊情况的处理技巧

遵循这些最佳实践，可以确保组件样式既灵活又高效，同时保持代码的可维护性和一致性。

eui Elastic UI Framework 🙌 项目地址: https://gitcode.com/gh_mirrors/eu/eui