如何在React中使用情感进行样式设置

介绍

React 允许您直接使用 style 属性设置组件的样式。 在大多数情况下，使用 style 属性传递 CSS 属性对象就足够了。

但是，对于需要更苛刻的造型功能的情况，emotion 可以提供解决方案。 emotion 是一个灵活且高性能的 CSS-in-JS 库。 它接受字符串和对象，支持默认和扩展变量，并且通过额外的 Babel 插件甚至支持内联子选择器。

在本文中，您将构建一个使用 @emotion/react 和 @emotion/styled 包进行样式设置的 React 应用程序。

先决条件

要完成本教程，您需要：

• Node.js 的本地开发环境。 关注【X7X】如何安装Node.js并创建本地开发环境【X76X】。

注意：本文之前推荐了emotion和react-emotion包。 现在有几个版本，@emotion/react 和 @emotion/styled 是现代方法。

本教程已使用 Node v15.3.0、npm v7.4.0、react v17.0.1、@emotion/react v11.1.4 和 @emotion/styled v11.0.0 进行了验证.

第 1 步 — 设置项目

首先使用 create-react-app 生成 React App，然后安装依赖项：

npx create-react-app react-emotion-example

切换到新的项目目录：

cd react-emotion-example

接下来，通过 npm 安装 @emotion/react 和 @emotion/styled：

npm install @emotion-react@11.1.4 @emotion/styled@11.0.0

此时，您将拥有一个带有 @emotion/react 的新 React 项目。

第 2 步 — 使用 css 道具

emotion 提供了一个 css 属性，可以接受嵌套选择器和媒体查询。 它可以支持对象或标记的模板文字。

在代码编辑器中打开 App.js 文件并修改它以使用带有 css 属性的 <div>s：

src/App.js

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

function App() {
  return (
    <div>
      <div css={css({
        margin: 10,
        padding: 10,
        backgroundColor: '#eee',
      })}>
        This is an example of <code>`css`</code> using an object.
      </div>
      <div css={css`
        margin: 10px;
        padding: 10px;
        background-color: #eee;
      `}>
        This is an example of <code>`css`</code> using a tagged template literal.
      </div>
    </div>
  );
}

export default App;

第一个示例使用具有样式对象属性和值的对象。 第二个示例使用带有 CSS 规则的标记模板文字。

注意： 由于本教程依赖于 Create React App 4，所以需要指定 /** @jsxImportSource @emotion/react */。 此注释通知 Babel 自定义运行时自动导入。

运行应用程序：

npm start

在浏览器中观察应用程序。 这将产生两个相同的 <div>，具有 10 个 margin 像素、10 个 padding 像素和灰色背景色。

第 3 步 — 使用 styled 组件

emotion 还支持 styled 组件来创建元素并为其设置样式。 它还可以支持对象或标记的模板文字。

让我们考虑一个 Heading 组件，它生成一个 h1 标题元素并接受将设置 background-color 和 color：

const Heading = styled('h1')`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

使用此 Heading 组件时，您将能够将颜色值传递给 bg 和 fg：

<Heading bg="#008f68" fg="#fae042">
  Heading with a green background and yellow text.
</Heading>

在代码编辑器中重新访问 App.js 并修改它以使用 styled 组件：

src/App.js

import styled from '@emotion/styled';

const Heading = styled('h1')`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

function App() {
  return (
    <div>
      <Heading bg="#008f68" fg="#fae042">
        Heading with a green background and yellow text.
      </Heading>
    </div>
  );
}

export default App;

此代码将生成一个带有绿色背景和黄色文本的 h1 元素。

接下来，考虑一个扩展 Heading 组件并使用 withComponent 更改渲染文本的 Subheading 组件：

const Subheading = Heading.withComponent('h2');

组件将使用 h2 标题而不是 h1 标题。

此代码将生成具有默认颜色的 h2：

<Subheading>
  Subheading with default colors.
</Subheading>

此代码将生成带有浅绿色文本的 h2：

<Subheading fg="#6db65b">
  Subheading with light green text.
</Subheading>

此代码将生成一个带有浅绿色背景的 h2：

<Subheading bg="#6db65b">
  Subheading with light green background.
</Subheading>

您可以将样式指定为对象而不是字符串：

const Quote = styled('blockquote')(props => ({
  fontSize: props.size,
}));

甚至包括一个默认样式的对象：

const Cite = styled('cite')(
  {
    fontWeight: 100
  },
  props => ({
    fontWeight: props.weight
  })
);

使用组件时可以选择设置。

此代码使用默认的 fontWeight 值：

<Cite>
  Citation with light text!
</Cite>

此代码提供了一个 weight 属性，它覆盖了默认的 fontWeight 值：

<Cite weight={700}>
  Citation with heavy text!
</Cite>

使用 emotion 您可以指定 !important 样式：

const Footer = styled('footer')`
  margin-top: 50px !important;
`;

此代码生成一个 footer 元素，其 margin-top 为 50 像素。

第 4 步 — 使用 css 道具和 styled 组件

现在，反思您在前面的示例中学到的知识，并使用这些概念来构造一个使用 css 道具和 styled 组件的组件。

使用您的代码编辑器重新访问 App.js 并将内容替换为以下代码行：

src/App.js

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';
import styled from '@emotion/styled';

const Heading = styled('h1')`
  background-color: ${props => props.bg};
  color: ${props => props.fg};
`;

const Subheading = Heading.withComponent('h2');

const Quote = styled('blockquote')(props => ({
  fontSize: props.size
}));

const Cite = styled('cite')(
  {
    fontWeight: 100
  },
  props => ({
    fontWeight: props.weight
  })
);

const Footer = styled('footer')`
  border-top: 1px solid #ccc;
  color: #ccc;
  margin-top: 50px !important;
  padding-top: 20px;
`;

function App() {
  return (
    <div css={css`background: #ddd;`}>
      <div css={css({ padding: 10 })}>
        <Heading bg="#008f68" fg="#fae042">
          Quotations
        </Heading>
        <Subheading fg="#6db65b">
          For React Developers
        </Subheading>
        <Quote size={28}>
          I built this with <code>`emotion/react`</code> and <code>`emotion/styled`</code>!
        </Quote>
        <Cite weight={700}>Sammy</Cite>
        <Footer>Shark Facts</Footer>
      </div>
    </div>
  );
}

export default App;

此代码使用带有字符串和对象的 css 道具和 styled 组件。 它还利用使用 withComponent 扩展 styled 组件并使用默认值覆盖 styled 组件。

结论

在本文中，您构建了一个使用 @emotion/react 和 @emotion/styled 包进行样式设置的 React 应用程序。

如果您想了解有关 React 的更多信息，请查看我们的 如何在 React.js 中编码，或查看 我们的 React 主题页面 以了解练习和编程项目。