四、使用 Emotion React 组件定义样式
在本章中,我们将使用 JS 库中一个名为“Emotion”的流行 CSS 来设计我们迄今为止构建的问答应用。我们将从了解如何使用纯 CSS 设计组件及其缺点开始。接下来,我们将继续了解 JS 中的 CSS 如何解决普通 CSS 在安装 Emotion 之前遇到的问题。最后,在创建一些可重用的样式化组件之前,我们将使用 Emotion 的css
道具对组件进行样式化。
本章将介绍以下主题:
- 使用 CSS 设置组件的样式
- 使用 CSS 模块设置组件样式
- 带 Emotion 的造型组件
- 使用 Emotion 设置伪类和嵌套元素的样式
- 使用 Emotion 创建可重用的样式化组件
- 完成主页样式设置
技术要求
本章需要以下工具:
- Visual Studio 代码:我们将使用它来编辑我们的 React 代码。可从下载并安装 https://code.visualstudio.com/ 。如果您已经安装了它,请确保它至少是 1.52 版。
- Node.js 和 npm:可从下载 https://nodejs.org/ 。如果已经安装了这些,请确保 Node.js 至少是版本 8.2,
npm
至少是版本 5.2。 - Q&A:我们将从本章的 Q&A 前端启动器项目开始。这是我们在第三章中完成的项目,开始使用 React 和 TypeScript。可在 GitHub 的上获取 https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition
chapter-04/start
文件夹中的。
本章中的所有代码片段可在网上找到 https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition 。为了从章节中恢复代码,可以下载源代码存储库,并在相关编辑器中打开相关文件夹。如果代码为前端代码,则可以在终端中使用npm install
恢复依赖关系。
查看以下视频以查看代码的运行:https://bit.ly/2WALbb2
使用 CSS 设置组件样式
在本节中,我们将使用常规 CSS 设计主体、应用容器和标题容器的样式,并了解这种方法的缺点。
设置文档正文的样式
我们将使用传统方法来设计文档正文的样式。按照以下步骤进行操作:
-
Open
index.tsx
. Remember thatindex.tsx
is the root of the React component tree. Notice how the CSS file is referenced:cs import './index.css';
为了在 React 组件中引用 CSS 文件,我们在
import
语句之后指定文件的位置。index.css
与index.tsx
在同一文件夹中,因此导入路径为./
。 -
打开
index.css
。注意,我们已经为body
标记准备了 CSS。让我们删除除margin
之外的所有内容,并添加背景色:cs body { margin: 0; background-color: #f7f8fa; }
-
Let's also remove the redundant
code
CSS class inindex.css
.祝贺您,我们刚刚在应用中应用了一些样式!
-
Let's run the app by entering the following command in the terminal:
```cs
npm start ```
该应用如下所示:
图 4.1–样式化 HTML 正文
应用的背景色现在是浅灰色。在我们设计App
组件时,让应用继续运行。
设置应用组件的样式
我们将在步骤中对App
组件应用 CSS 类:
-
Open
App.tsx
and change the class name tocontainer
on thediv
element:cs function App() { return ( <div className="container"> <Header /> <HomePage /> </div> ); }
为什么
className
属性用于引用 CSS 类?我们不应该使用class
属性吗?我们已经知道 JSX 可以编译成 JavaScript,因为class
是 JavaScript 中的一个关键字,所以 React 使用className
属性。当向 HTML DOM 添加元素时,React 将className
转换为class
。重要提示
React 团队目前正致力于允许使用
class
属性而不是className
。参见https://github.com/facebook/react/issues/13525 了解更多信息。 -
打开
App.css
,删除此文件中的所有 CSS,并添加以下 CSS 类:cs .container { font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 16px; color: #5c5a5a; }
-
在浏览器中查看应用。如以下屏幕截图所示:
图 4.2–使用 CSS 设计的应用组件
我们看到应用中的文本内容具有我们指定的字体、大小和颜色。在下一小节中应用更多 CSS 时,保持应用运行。
设置收割台组件的样式
我们将在步骤中对Header
组件应用 CSS 类:
-
Create a file called
Header.css
in thesrc
folder and add the following CSS class:cs .container { position: fixed; box-sizing: border-box; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background-color: #fff; border-bottom: 1px solid #e3e2e2; box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21); }
此样式将修复应用于页面顶部的元素。其中的元素将在页面上水平流动,并被很好地定位。
-
打开
Header.tsx
并导入我们刚刚创建的 CSS 文件:cs import './Header.css';
-
在 JSX 中的
div
元素中添加container
类:cs <div className="container">
-
查看正在运行的应用,打开浏览器的 DevTools,进入元素面板。
-
We can see that the container style has leaked out of the
Header
component into theApp
component because thediv
element in theApp
component has a drop shadow:图 4.3–使用 CSS 设置样式的标题组件
-
在终端中按Ctrl+C,如果提示停止应用运行,则按Y。
- 我们刚刚遇到了 CSS 的一个常见问题。CSS 本质上是全球性的。因此,如果我们在一个组件中使用一个名为
container
的 CSS 类名称,那么如果一个页面同时引用两个 CSS 文件,它将与另一个 CSS 文件中名为container
的 CSS 类发生冲突。
我们可以通过使用诸如 BEM 之类的东西来小心地命名和构造 CSS 来解决这个问题。例如,我们可以将 CSS 类命名为app-container
和header-container
,这样它们就不会发生冲突。然而,仍然有一些被选择的名字发生冲突的风险,特别是在大型应用中以及当新成员加入团队时。
重要提示
BEM代表块、元素、修饰符,是 CSS 类名的常用命名约定。更多信息请访问https://css-tricks.com/bem-101/ 。
在下一节中,我们将学习如何使用 CSS 模块解决此问题。
使用 CSS 模块设置组件样式
CSS 模块是确定 CSS 类名范围的一种机制。范围界定作为构建步骤而不是在浏览器中进行。事实上,CSS 模块已经在我们的应用中可用,因为 CreateReact 应用已经在 webpack 中配置了它们。
我们将通过以下步骤将Header
和App
组件上的样式更新为 CSS 模块:
- 将
Header.css
重命名为Header.module.css
,将App.css
重命名为App.module.css
。Create React 应用配置为将以module.css
结尾的文件视为 CSS 模块。 -
打开
App.tsx
并将App.css``import
语句更改为以下内容:cs import styles from './App.module.css'
-
Update the
className
prop on thediv
element to the following:cs <div className={styles.container}>
这引用了带有
App
CSS 模块的容器类。 -
打开
Header.tsx
并将Header.css``import
语句更改为以下内容:cs import styles from './Header.module.css'
-
将
div
元素上的className
道具更新为以下内容:cs <div className={styles.container}>
-
让我们在终端中输入以下命令来运行应用:
cs npm start
-
Open the browser's DevTools to the Elements panel:
图 4.4–CSS 模块的样式
我们可以看到
Header
组件中的样式不再泄漏到App
组件中。我们可以看到 CSS 模块已经更新了元素上的类名,用组件名作为前缀,并在末尾添加了随机字符。 -
Look in the HTML
head
tag. We can see the CSS from the CSS modules instyle
tags:图 4.5-head 标签中的 CSS 模块
-
在终端中按Ctrl+C,如果提示停止应用运行,则按Y。
这太棒了!CSS 模块自动对应用于 React 组件的 CSS 进行范围限定,而无需我们小心类命名。
在下一节中,我们将学习另一种设计 React 组件样式的方法,它可以说更强大。
带 Emotion 的造型组件
在部分中,我们将使用 JS 库中一个名为 Emotion 的流行 CSS 对App
、Header
和HomePage
组件进行样式化。在此过程中,我们将发现 JS 中 CSS 相对于 CSS 模块的优势。
安装 Emotion
随着前端项目在 Visual Studio 代码中打开,让我们通过执行以下步骤将 Emotion 安装到项目中:
-
打开终端,确认您在
frontend
文件夹中,执行以下命令:```cs
npm install @emotion/react @emotion/styled ```
-
There is a nice Visual Studio Code extension that will provide CSS syntax highlighting and IntelliSense for Emotion. Open the Extensions area (Ctrl + Shift + X on Windows or Cmd + Shift + X on Mac) and type
styled components
in the search box at the top left. The extension we are looking for is calledvscode-styled-components
and was published by Julien Poissonnier:图 4.6–样式化组件 Visual Studio 代码扩展
重要提示
这个扩展主要是为 JS 库中的样式化组件 CSS 开发的。不过,CSS 高亮显示和 IntelliSense 也适用于 Emotion。
-
点击安装按钮安装扩展。
- 要再次显示浏览器面板,请在 Windows 上按Ctrl+Shift+E或在 Mac 上按Cmd+Shift+E。
这是安装在我们项目中的 Emotion,并在 VisualStudio 代码中进行了很好的设置。
设置应用组件的样式
让我们通过执行以下步骤,用 Emotion 设计App
组件:
- 首先,通过右键单击
App.module.css
文件并选择删除选项来删除该文件。 - 在
App.tsx
中,删除表示import styles from './App.module.css'
的行。 -
Remove the React
import
statement fromApp.tsx
.重要提示
在 React 17 及更高版本中,不再需要包含 React
import
语句来呈现 JSX,就像在App.tsx
中一样。但是,如果我们想使用库中的函数,比如useState
和useEffect
,仍然需要 Reactimport
语句。 -
Add the following imports from the Emotion library at the top of
App.tsx
:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react';
css
函数是我们用来设计 HTML 元素样式的函数。import
语句上方的注释告诉巴贝尔使用jsx
函数将 JSX 转换为 JavaScript。重要提示
重要的是要包括
/** @jsxImportSource @emotion/react */
注释;否则,透明过程将出错。同样重要的是,将其放在文件的顶部。 -
On the
App
component'sdiv
element, remove theclassName
prop and use thecss
function to specify the style:cs <div css={css` font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 16px; color: #5c5a5a; `}> <Header /> <HomePage /> </div>
我们将样式放在 HTML 元素的
css
道具中,称为标记模板文字。重要提示
模板文本是一个由倒勾(
``cs
)括起来的字符串,它可以跨越多行,并且可以在大括号中包含一个 JavaScript 表达式,前缀为美元符号(${expression}
。当我们需要将静态文本与变量合并时,模板文本非常有用。标记的模板文字是通过在模板文字字符串之前指定的函数执行的模板字符串。在浏览器中呈现字符串之前,将对模板文本执行该函数。
因此,Emotion 的
css
函数被用于标记的模板文本中,以呈现 HTML 元素上 backticks(````中定义的样式。 -
We actually want to specify the font family, size, and color in various components in our app. To do this, we are going to extract these values into variables in a separate file. Let's create a file called
Styles.ts
in thesrc
folder that contains the following variables:cs export const gray1 = '#383737'; export const gray2 = '#5c5a5a'; export const gray3 = '#857c81'; export const gray4 = '#b9b9b9'; export const gray5 = '#e3e2e2'; export const gray6 = '#f7f8fa'; export const primary1 = '#681c41'; export const primary2 = '#824c67'; export const accent1 = '#dbb365'; export const accent2 = '#efd197'; export const fontFamily = "'Segoe UI', 'Helvetica Neue',sans-serif"; export const fontSize = '16px';
在这里,我们定义了六种灰度、两种应用原色、两种强调色,以及我们将用于标准字体大小的字体系列。
-
让我们将需要的变量导入
App.tsx
:cs import { fontFamily, fontSize, gray2 } from './Styles';
-
现在,我们可以使用插值在 CSS 模板文本中使用这些变量:
``cs <div css={css
font-family: ${fontFamily}; font-size: ${fontSize}; color: ${gray2}; `}```
祝贺您–我们刚刚用 Emotion 设计了我们的第一个组件!
让我们探索一下 running 应用中的样式。这将有助于我们理解 Emotion 是如何运用风格的:
- 让我们在终端中通过执行
npm start
来运行应用。 -
Let's inspect the DOM on the browser page by pressing F12:
图 4.7–使用 Emotion 设计的应用组件
我们可以看到,我们所设计的 AUT0T0 元素有一个类名,从类名 T1 开始,以组件名结尾,中间有一个唯一的名称。CSS 类中的样式是我们在组件中使用 Emotion 定义的样式。所以,Emotion 并不像我们想象的那样生成内联样式。相反,Emotion 生成的样式保存在独特的 CSS 类中。如果我们查看 HTML 标题,我们将看到在
style
标记中定义的 CSS 类:图 4.8–head 标签中的 Emotion 风格
因此,在应用的构建过程中,Emotion 已经将样式转换为真正的 CSS 类。
-
在终端中按Ctrl+C,如果提示停止应用运行,则按Y。
- 与 CSS 模块相比,使用 Emotion 的优势在于能够在 CSS 中使用变量。我们刚刚使用它来定义一些常见的样式属性,并在
App
组件中使用它们。在本书中,我们将使用样式中的变量,其中逻辑驱动组件上的样式。
设置收割台组件的样式
我们可以通过执行以下步骤,为Header
组件设置 Emotion 样式:
- 首先删除
Header.module.css
文件。 -
在
Header.tsx
中,删除Header.module.css``import
语句,并为 Emotion 和我们之前设置的一些样式变量添加以下导入。将这些import
语句添加到文件顶部:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { fontFamily, fontSize, gray1, gray2, gray5 } from './Styles';
-
Now, we can remove the
className
property and define the following style on thediv
container element:``cs <div css={css
position: fixed; box-sizing: border-box; top: 0; width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; background-color: #fff; border-bottom: 1px solid ${gray5}; box-shadow: 0 3px 7px 0 rgba(110, 112, 114, 0.21); `}... ```
我们正在应用与 CSS 模块中相同的样式。
-
App
和Header
组件现在的样式与 CSS 模块方法相同。在下一节中,我们将继续设计Header
组件,学习 Emotion 的更多特征。
使用 Emotion 设置伪类和嵌套元素的样式
在这一节中,我们将学习如何用 Emotion 风格化伪类。然后,我们将继续学习如何设置嵌套元素的样式:
-
In
Header.tsx
, implement the following styles on the anchor tag:``cs <a href="./" css={css
font-size: 24px; font-weight: bold; color: ${gray1}; text-decoration: none; `}Q & A ```
在这里,我们将应用名称设置为相当大、粗体和深灰色,并删除下划线。
-
Let's move on and style the search box:
cs <input type="text" placeholder="Search..." onChange={handleSearchInputChange} css={css` box-sizing: border-box; font-family: ${fontFamily}; font-size: ${fontSize}; padding: 8px 10px; border: 1px solid ${gray5}; border-radius: 3px; color: ${gray2}; background-color: white; width: 200px; height: 30px; `} />
在这里,我们使用标准字体系列和大小,并为搜索框提供浅灰色圆形边框。
-
We are going to continue to style the
input
element. We want to change its outline color for when it has focus to a gray color. We can achieve this with afocus
pseudo-class selector, as follows:cs <input type="text" placeholder="Search..." css={css` … :focus { outline-color: ${gray5}; } `} />
伪类通过嵌套在输入的 CSS 中来定义。该语法与在常规 CSS 中相同,在伪类名及其 CSS 属性前加一个冒号(
:
),放在花括号内。 -
Let's move on to the Sign In link element now. Let's start to style it as follows:
``cs <a href="./signin" css={css
font-family: ${fontFamily}; font-size: ${fontSize}; padding: 5px 10px; background-color: transparent; color: ${gray2}; text-decoration: none; cursor: pointer; :focus { outline-color: ${gray5}; } `}Sign In ```
这些样式在图标和链接内的文本周围添加了一些空间,并删除了其中的下划线。当链接具有焦点时,我们还使用伪类选择器更改了链接周围线条的颜色。
-
Let's style the
span
element within the Sign In link by adding the following to the end of the template literal:``cs <a href="./signin" css={css
… span { margin-left: 7px; } `}Sign In ```
我们选择在锚标记上使用嵌套元素选择器来设置
span
元素的样式。这相当于直接在span
元素上应用样式,如下所示:``cs <span css={css
margin-left: 7px; `}Sign In ```
-
下一步是在
Icons.tsx
文件中设置UserIcon
组件的样式。让我们将以下内容添加到文件的顶部:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react';
-
Now, we can define the styles on the
img
element, replacing thewidth
attribute:cs <img src={user} alt="User" css={css` width: 12px; opacity: 0.6; `} />
我们已经将宽度从
img
标记上的属性移到了它的 CSS 样式中。现在,图标是一个很好的大小和似乎是一个小的颜色较轻。 -
让我们在终端中执行
npm start
来运行应用。 - 如果我们看看 running 应用,我们会发现我们的应用标题现在看起来好多了:
图 4.9–全样式标题
我们正在掌握情绪的窍门。
定义样式属性的语法与在 CSS 中定义属性完全相同,如果我们已经很了解 CSS,这很好。我们甚至可以用类似于在 SCS 中嵌套 CSS 属性的方式来嵌套 CSS 属性。
样式的剩余部分是HomePage
——我们将在下一步讨论它。
创建具有 Emotion 的可重用样式组件
在本节中,我们将学习如何在对HomePage
组件进行样式化的同时创建可重用的样式的组件。让我们执行以下步骤:
-
我们将从
Page.tsx
中的Page
组件开始,并在文件顶部添加以下行:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react';
-
让我们设计
div
元素的样式,并将页面内容放在屏幕中央:``cs export const Page = ({ title, children }: Props) => ( <div css={css
margin: 50px auto 20px auto; padding: 30px 20px; max-width: 600px; `}…
); ```
-
让我们转到
HomePage.tsx
并在文件顶部添加以下行:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react';
-
Next, we will style the
div
element that wraps the page title and the Ask a question button:``cs <Page> <div css={css
display: flex; align-items: center; justify-content: space-between; `}<PageTitle>Unanswered Questions</PageTitle> <button onClick={handleAskQuestonClick}>Ask a question</button>
```
这会将页面标题和提问按钮放在同一行。
-
现在,让我们打开
PageTitle.tsx
并设计页面标题。在文件顶部添加以下行:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react';
-
We can then apply the following styles to the
h2
element:``cs <h2 css={css
font-size: 15px; font-weight: bold; margin: 10px 0px 5px; text-align: center; text-transform: uppercase; `}{children} ```
这将减小页面标题的大小并使其大写,从而使页面内容更加突出。
-
最后,我们有提问按钮,这是主页上的主要按钮。最终,我们将在几个页面上设置主按钮,因此让我们在
Styles.ts
文件中创建一个可重用PrimaryButton
样式的组件。首先,我们需要从 Emotion 中导入样式化的函数。因此,将这一行添加到文件的顶部:cs import styled from '@emotion/styled';
-
Now, we can create the primary button styled component:
cs export const PrimaryButton = styled.button` background-color: ${primary2}; border-color: ${primary2}; border-style: solid; border-radius: 5px; font-family: ${fontFamily}; font-size: ${fontSize}; padding: 5px 10px; color: white; cursor: pointer; :hover { background-color: ${primary1}; } :focus { outline-color: ${primary2}; } :disabled { opacity: 0.5; cursor: not-allowed; } `;
在这里,我们通过使用标记的模板文本在 Emotion 中创建了一个样式化组件。
重要提示
标记的模板文字是要用函数解析的模板文字。模板文本包含在 backticks(
``cs
)中,解析函数放在它的前面。更多的信息可在上找到 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 。在一个样式化的组件中,背景符号(
```之前的解析函数引用了 Emotion 的
styled函数中的一个函数。该函数使用将创建的 HTML 元素名命名,并使用提供的样式设置样式。这是本例中的
button`。因此,这个样式化的组件创建了一个带有我们选择的原色的平面、略圆的按钮。
-
让我们将其导入到
HomePage.tsx
文件中:cs import { PrimaryButton } from './Styles';
-
现在,我们可以用我们的
PrimaryButton
样式的组件cs <Page> <div ... > <PageTitle>…</PageTitle> <PrimaryButton onClick={handleAskQuestionClick}> Ask a question </PrimaryButton> </div> </Page>
替换
HomePage
JSX 中的button
标记 11. If we look at the running app, we'll see that it's looking much nicer:
图 4.10–样式化页面标题和主按钮
在主页的样式设计方面还有很多工作要做,例如呈现未回答问题的列表。我们将在下一节中进行此操作。
完成主页样式设置
在本节中,我们将完成主页上的样式设置。
设置问题列表组件的样式
让我们通过以下步骤对QuestionList
组件进行样式设计:
-
打开
QuestionList.tsx
并在文件顶部添加以下行:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react;
-
同时导入以下常用样式:
cs import { accent2, gray5 } from './Styles';
-
Style the
ul
element in the JSX as follows:``cs <ul css={css
list-style: none; margin: 10px 0 0 0; padding: 0px 20px; background-color: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top: 3px solid ${accent2}; box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.16); `}… ```
因此,
ul
元素将显示为没有项目符号的圆形边框。顶部边框将略厚,并采用强调色。我们添加了一个方框阴影,使列表稍微突出一点。 -
Now, let's style the list items:
```cs <ul ...
<li key={question.questionId} css={css
border-top: 1px solid ${gray5}; :first-of-type { border-top: none; }
}…
```
-
如果我们看一下正在运行的应用,未回答的问题容器看起来不错:
列表项上的样式将添加浅灰色上边框。这将作为每个列表项之间的行分隔符。
图 4.11–样式化未回答问题容器
接下来,我们将为问题添加样式。
设置问题组件的样式
按照以下步骤设置组件的样式:
-
打开
Question.tsx
并在文件顶部添加以下行:cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { gray2, gray3 } from './Styles';
-
让我们为最外层的
div
元素添加一些填充,如下所示:``cs <div css={css
padding: 10px 0px; `}{data.title}… ``` -
在问题标题中添加一些填充,并增加其字体大小:
``cs <div css={css
padding: 10px 0px; font-size: 19px; `}{data.title} ```
-
在自选题内容中增加以下样式:
``cs {showContent && ( <div css={css
padding-bottom: 10px; font-size: 15px; color: ${gray2}; `}…
)} ```
-
最后,在提问者的文本周围添加以下样式:
``cs <div css={css
font-size: 12px; font-style: italic; color: ${gray3}; `}{
Asked by ${data.userName} on ${data.created.toLocaleDateString()} ${data.created. toLocaleTimeString()}
} ``` -
如果我们现在查看 running 应用,我们将在主页上看到以下样式:
图 4.12–完成的主页样式
这就完成了主页上的样式设置。现在看起来好多了。
总结
在本章中,我们学习了设计 React 应用的不同方法。我们现在了解到,JS 库中的 CSS 自动将样式范围限定到组件,并允许我们在样式中使用动态变量。
我们了解如何使用 JS 库中的 Emotion CSS 使用其css
道具为 React 组件设计样式。我们可以通过将伪类嵌套在css
prop 样式字符串中来设置伪类的样式。
我们知道如何使用 Emotion 中的styled
函数创建可重用样式的组件。这些可以在我们的应用中作为常规 React 组件使用。
在下一章中,我们将向我们的应用添加更多页面,并学习如何实现这些页面的客户端路由。
问题
尝试回答以下问题以测试您对本章的知识:
- 在 CreateReact 应用中,CSS 模块的文件名约定是什么?
-
下面代码块中的 submit button 组件的背景颜色是从
Color.ts
文件中的常量设置的。但是,在页面上呈现组件时,没有设置按钮背景色。有什么问题?cs import React from 'react'; /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { primaryAccent1 } from './Colors'; interface Props { children: React.ReactNode } export const SubmitButton = ({ children }: Props) => { return ( <button css={css` background-color: primaryAccent1; `} > {children} </button> ); };
-
在上一个问题的
SubmitButton
部分中,当提纲有焦点时,我们如何删除提纲? - 在我们的问答应用中,我们创建了一个只包含样式的
PageTitle
组件。我们如何将其更改为可重用的样式化组件? -
我们在一些 JSX 中有以下输入元素。我们如何设置占位符文本的样式,使其具有
#dcdada
颜色?cs <input type="text" placeholder="Enter your name" />
答案
- 文件命名约定为
ComponentName.module.css
。例如,Footer.module.css
将是Footer
组件的 CSS 模块。 -
问题是背景颜色设置为
'primaryAccent'
字符串,而不是常量。css
道具应设置如下:``cs <button css={css
background-color: ${primaryAccent1}; `}{children} ```
-
我们可以使用如下的
focus
伪类:``cs <button css={css
background-color: ${primaryAccent1}; :focus { outline: none; } `}{children} ```
-
我们可以使用以下样式化组件:
cs export const PageTitle = styled.h2` font-size: 15px; font-weight: bold; margin: 10px 0px 5px; text-align: center; text-transform: uppercase; `;
-
我们可以按如下方式设置占位符伪元素的样式:
cs <input type="text" placeholder="Enter your name" css={css` ::placeholder { color: #dcdada; } `} />
进一步阅读
以下是一些有用的链接,您可以了解有关本章所涵盖主题的更多信息:
- CSS 模块:https://github.com/css-modules/css-modules
- 创建 React App中的 CSS 模块 https://create-react-app.dev/docs/adding-a-css-modules-stylesheet
- 情绪:https://emotion.sh/docs/introduction
版权属于:月萌API www.moonapi.com,转载请注明出处