如何在 React 中使用情感来设计风格

介绍

React 允许您直接使用风格属性来样式化组件,在大多数情况下,使用风格插件传递 CSS 属性的对象就足够了。

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

在本文中,您将构建一个React应用程序,该应用程序使用@emotion/react和@emotion/styled套件来设计风格。

前提条件

要完成本教程,您将需要:

<$>[注] **注:**本文以前推荐了情绪和反应情绪套件,现在几种版本之后,@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,然后安装依赖:

1npx create-react-app react-emotion-example

更改到新项目目录:

1cd react-emotion-example

接下来,通过npm安装@emotion/react和@emotion/styled:

1npm install @[email protected] @emotion/[email protected]

在此时刻,您将有一个新的React项目,其中包含@emotion/react。

步骤 2 — 使用css Prop

'emotion' 提供了可以接受嵌入式选择器和媒体查询的 'css' 支撑,它可以支持对象或标记的模板。

在代码编辑器中打开App.js文件,并修改它以使用css插件的<div>文件:

 1[label src/App.js]
 2/** @jsxImportSource @emotion/react */
 3import { css } from '@emotion/react';
 4
 5function App() {
 6  return (
 7    <div>
 8      <div css={css({
 9        margin: 10,
10        padding: 10,
11        backgroundColor: '#eee',
12      })}>
13        This is an example of <code>`css`</code> using an object.
14      </div>
15      <div css={css`
16        margin: 10px;
17        padding: 10px;
18        background-color: #eee;
19      `}>
20        This is an example of <code>`css`</code> using a tagged template literal.
21      </div>
22    </div>
23  );
24}
25
26export default App;

第一个示例使用具有风格对象属性和值的对象,第二个示例使用具有 CSS 规则的标记模板。

<$>[注] **注:**由于本教程依赖于Create React App 4,因此必须指定 /** @jsxImportSource @emotion/react */。

运行应用程序:

1npm start

观察你的浏览器中的应用程序. 这将产生两个相同的<div>的十个像素的边缘,十个像素的Padding和灰色背景颜色。

步骤 3 – 使用风格化的组件

'emotion' 还支持一个'styled' 组件来创建一个元素和风格,它也可以支持对象或标记模板的字面形式。

让我们考虑一个标题组件,该组件生成一个h1标题元素,并接受bg(背景)和fg(前景)属性,将设置背景颜色和颜色:

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

使用此标题组件时,您将能够将颜色值传输到bg和fg:

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

在代码编辑器中修复App.js,并将其修改为使用样式化组件:

 1[label src/App.js]
 2import styled from '@emotion/styled';
 3
 4const Heading = styled('h1')`
 5  background-color: ${props => props.bg};
 6  color: ${props => props.fg};
 7`;
 8
 9function App() {
10  return (
11    <div>
12      <Heading bg="#008f68" fg="#fae042">
13        Heading with a green background and yellow text.
14      </Heading>
15    </div>
16  );
17}
18
19export default App;

此代码将产生一个h1元素,具有绿色背景和黄色文本。

接下来,考虑一个扩展标题组件的子标题组件,并使用与组件更改渲染的文本:

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

代替h1标题,组件将与h2标题进行渲染。

此代码将产生一个h2的默认颜色:

1<Subheading>
2  Subheading with default colors.
3</Subheading>

此代码将产生一个h2的绿色文字:

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

此代码将产生一个h2和一个绿色背景:

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

您可以指定您的风格作为一个对象而不是作为一个字符串:

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

甚至包括默认风格的对象:

1const Cite = styled('cite')(
2  {
3    fontWeight: 100
4  },
5  props => ({
6    fontWeight: props.weight
7  })
8);

可在使用组件时选项设置。

此代码使用默认 fontWeight 值:

1<Cite>
2  Citation with light text!
3</Cite>

此代码提供一个重量支撑,该支撑将默认值fontWeight取代:

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

通过情绪,您可以指定重要风格:

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

此代码产生一个脚元素,具有50像素的边缘顶部。

步骤 4 — 使用css插件和风格化组件

现在,反思上面的例子中所学到的内容,并使用这些概念来构建一个使用css补丁和styled组件的组件。

用代码编辑器修复App.js,并用 代替以下代码行:

 1[label src/App.js]
 2/** @jsxImportSource @emotion/react */
 3import { css } from '@emotion/react';
 4import styled from '@emotion/styled';
 5
 6const Heading = styled('h1')`
 7  background-color: ${props => props.bg};
 8  color: ${props => props.fg};
 9`;
10
11const Subheading = Heading.withComponent('h2');
12
13const Quote = styled('blockquote')(props => ({
14  fontSize: props.size
15}));
16
17const Cite = styled('cite')(
18  {
19    fontWeight: 100
20  },
21  props => ({
22    fontWeight: props.weight
23  })
24);
25
26const Footer = styled('footer')`
27  border-top: 1px solid #ccc;
28  color: #ccc;
29  margin-top: 50px !important;
30  padding-top: 20px;
31`;
32
33function App() {
34  return (
35    <div css={css`background: #ddd;`}>
36      <div css={css({ padding: 10 })}>
37        <Heading bg="#008f68" fg="#fae042">
38          Quotations
39        </Heading>
40        <Subheading fg="#6db65b">
41          For React Developers
42        </Subheading>
43        <Quote size={28}>
44          I built this with <code>`emotion/react`</code> and <code>`emotion/styled`</code>!
45        </Quote>
46        <Cite weight={700}>Sammy</Cite>
47        <Footer>Shark Facts</Footer>
48      </div>
49    </div>
50  );
51}
52
53export default App;

此代码使用具有字符串和对象的css附件和styled组件,还使用使用使用withComponent扩展的styled组件,以及使用默认值的styled组件。

结论

在本文中,您建立了一个React应用程序,该应用程序使用@emotion/react和@emotion/styled包来设计风格。

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

Published At
Categories with 技术
Tagged with
comments powered by Disqus