React 中如何使用 Emotion 编写 CSS？

推荐答案

在 React 中使用 Emotion 编写 CSS 可以通过以下几种方式实现：

1. 使用 css 函数

// www.javascriptcn.com code example
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  color: red;
  font-size: 20px;
`;

function MyComponent() {
  return <div css={style}>Hello, Emotion!</div>;
}

2. 使用 styled 组件

// www.javascriptcn.com code example
/** @jsxImportSource @emotion/react */
import styled from '@emotion/styled';

const StyledDiv = styled.div`
  color: blue;
  font-size: 24px;
`;

function MyComponent() {
  return <StyledDiv>Hello, Emotion!</StyledDiv>;
}

3. 使用 Global 组件定义全局样式

// www.javascriptcn.com code example
/** @jsxImportSource @emotion/react */
import { Global, css } from '@emotion/react';

const globalStyles = css`
  body {
    margin: 0;
    padding: 0;
  }
`;

function MyComponent() {
  return (
    <>
      <Global styles={globalStyles} />
      <div>Global styles applied!</div>
    </>
  );
}

本题详细解读

1. css 函数

css 函数是 Emotion 提供的一个工具函数，允许你在 JSX 中直接编写 CSS 样式。通过 css 函数定义的样式可以直接应用于组件的 css 属性中。这种方式非常适合在组件内部定义局部样式。

2. styled 组件

styled 是 Emotion 提供的一个高阶组件，允许你通过模板字符串的方式定义样式，并生成一个带有样式的 React 组件。这种方式非常适合创建可重用的样式组件。

3. Global 组件

Global 组件用于定义全局样式。通过 Global 组件，你可以在应用的任何地方定义全局的 CSS 样式，这些样式将应用于整个应用。这种方式非常适合定义全局的样式规则，如重置样式或全局字体设置。

注意事项

• 在使用 Emotion 时，需要在文件顶部添加 /** @jsxImportSource @emotion/react */ 注释，以确保 Babel 正确解析 JSX 和 Emotion 的 css 属性。
• Emotion 支持 CSS-in-JS 的所有特性，包括嵌套、伪类、媒体查询等，因此你可以像在普通 CSS 中一样编写复杂的样式规则。