四、使用 Emotion React 组件定义样式

在本章中,我们将使用 JS 库中一个名为“Emotion”的流行 CSS 来设计我们迄今为止构建的问答应用。我们将从了解如何使用纯 CSS 设计组件及其缺点开始。接下来,我们将继续了解 JS 中的 CSS 如何解决普通 CSS 在安装 Emotion 之前遇到的问题。最后,在创建一些可重用的样式化组件之前,我们将使用 Emotion 的css道具对组件进行样式化。

本章将介绍以下主题:

  • 使用 CSS 设置组件的样式
  • 使用 CSS 模块设置组件样式
  • 带 Emotion 的造型组件
  • 使用 Emotion 设置伪类和嵌套元素的样式
  • 使用 Emotion 创建可重用的样式化组件
  • 完成主页样式设置

技术要求

本章需要以下工具:

本章中的所有代码片段可在网上找到 https://github.com/PacktPublishing/ASP.NET-Core-5-and-React-Second-Edition 。为了从章节中恢复代码,可以下载源代码存储库,并在相关编辑器中打开相关文件夹。如果代码为前端代码,则可以在终端中使用npm install恢复依赖关系。

查看以下视频以查看代码的运行:https://bit.ly/2WALbb2

使用 CSS 设置组件样式

在本节中,我们将使用常规 CSS 设计主体、应用容器和标题容器的样式,并了解这种方法的缺点。

设置文档正文的样式

我们将使用传统方法来设计文档正文的样式。按照以下步骤进行操作:

  1. Open index.tsx. Remember that index.tsx is the root of the React component tree. Notice how the CSS file is referenced:

    cs import './index.css';

    为了在 React 组件中引用 CSS 文件,我们在import语句之后指定文件的位置。index.cssindex.tsx在同一文件夹中,因此导入路径为./

  2. 打开index.css。注意,我们已经为body标记准备了 CSS。让我们删除除margin之外的所有内容,并添加背景色:

    cs body { margin: 0; background-color: #f7f8fa; }

  3. Let's also remove the redundant code CSS class in index.css.

    祝贺您,我们刚刚在应用中应用了一些样式!

  4. Let's run the app by entering the following command in the terminal:

    ```cs

    npm start ```

    该应用如下所示:

Figure 4.1 – Styled HTML body

图 4.1–样式化 HTML 正文

应用的背景色现在是浅灰色。在我们设计App组件时,让应用继续运行。

设置应用组件的样式

我们将在步骤中对App组件应用 CSS 类:

  1. Open App.tsx and change the class name to container on the div 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 了解更多信息。

  2. 打开App.css,删除此文件中的所有 CSS,并添加以下 CSS 类:

    cs .container { font-family: 'Segoe UI', 'Helvetica Neue', sans-serif; font-size: 16px; color: #5c5a5a; }

  3. 在浏览器中查看应用。如以下屏幕截图所示:

Figure 4.2 – App component styled with CSS

图 4.2–使用 CSS 设计的应用组件

我们看到应用中的文本内容具有我们指定的字体、大小和颜色。在下一小节中应用更多 CSS 时,保持应用运行。

设置收割台组件的样式

我们将在步骤中对Header组件应用 CSS 类:

  1. Create a file called Header.css in the src 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); }

    此样式将修复应用于页面顶部的元素。其中的元素将在页面上水平流动,并被很好地定位。

  2. 打开Header.tsx并导入我们刚刚创建的 CSS 文件:

    cs import './Header.css';

  3. 在 JSX 中的div元素中添加container类:

    cs <div className="container">

  4. 查看正在运行的应用,打开浏览器的 DevTools,进入元素面板。

  5. We can see that the container style has leaked out of the Header component into the App component because the div element in the App component has a drop shadow:

    Figure 4.3 – Header component styled with CSS

    图 4.3–使用 CSS 设置样式的标题组件

  6. 在终端中按Ctrl+C,如果提示停止应用运行,则按Y

  7. 我们刚刚遇到了 CSS 的一个常见问题。CSS 本质上是全球性的。因此,如果我们在一个组件中使用一个名为container的 CSS 类名称,那么如果一个页面同时引用两个 CSS 文件,它将与另一个 CSS 文件中名为container的 CSS 类发生冲突。

我们可以通过使用诸如 BEM 之类的东西来小心地命名和构造 CSS 来解决这个问题。例如,我们可以将 CSS 类命名为app-containerheader-container,这样它们就不会发生冲突。然而,仍然有一些被选择的名字发生冲突的风险,特别是在大型应用中以及当新成员加入团队时。

重要提示

BEM代表块、元素、修饰符,是 CSS 类名的常用命名约定。更多信息请访问https://css-tricks.com/bem-101/

在下一节中,我们将学习如何使用 CSS 模块解决此问题。

使用 CSS 模块设置组件样式

CSS 模块是确定 CSS 类名范围的一种机制。范围界定作为构建步骤而不是在浏览器中进行。事实上,CSS 模块已经在我们的应用中可用,因为 CreateReact 应用已经在 webpack 中配置了它们。

我们将通过以下步骤将HeaderApp组件上的样式更新为 CSS 模块:

  1. Header.css重命名为Header.module.css,将App.css重命名为App.module.css。Create React 应用配置为将以module.css结尾的文件视为 CSS 模块。
  2. 打开App.tsx并将App.css``import语句更改为以下内容:

    cs import styles from './App.module.css'

  3. Update the className prop on the div element to the following:

    cs <div className={styles.container}>

    这引用了带有AppCSS 模块的容器类。

  4. 打开Header.tsx并将Header.css``import语句更改为以下内容:

    cs import styles from './Header.module.css'

  5. div元素上的className道具更新为以下内容:

    cs <div className={styles.container}>

  6. 让我们在终端中输入以下命令来运行应用:

    cs npm start

  7. Open the browser's DevTools to the Elements panel:

    Figure 4.4 – Styling with CSS modules

    图 4.4–CSS 模块的样式

    我们可以看到Header组件中的样式不再泄漏到App组件中。我们可以看到 CSS 模块已经更新了元素上的类名,用组件名作为前缀,并在末尾添加了随机字符。

  8. Look in the HTML head tag. We can see the CSS from the CSS modules in style tags:

    Figure 4.5 – CSS modules in a head tag

    图 4.5-head 标签中的 CSS 模块

  9. 在终端中按Ctrl+C,如果提示停止应用运行,则按Y

这太棒了!CSS 模块自动对应用于 React 组件的 CSS 进行范围限定,而无需我们小心类命名。

在下一节中,我们将学习另一种设计 React 组件样式的方法,它可以说更强大。

带 Emotion 的造型组件

在部分中,我们将使用 JS 库中一个名为 Emotion 的流行 CSS 对AppHeaderHomePage组件进行样式化。在此过程中,我们将发现 JS 中 CSS 相对于 CSS 模块的优势。

安装 Emotion

随着前端项目在 Visual Studio 代码中打开,让我们通过执行以下步骤将 Emotion 安装到项目中:

  1. 打开终端,确认您在frontend文件夹中,执行以下命令:

    ```cs

    npm install @emotion/react @emotion/styled ```

  2. 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 called vscode-styled-components and was published by Julien Poissonnier:

    Figure 4.6 – Styled components Visual Studio Code extension

    图 4.6–样式化组件 Visual Studio 代码扩展

    重要提示

    这个扩展主要是为 JS 库中的样式化组件 CSS 开发的。不过,CSS 高亮显示和 IntelliSense 也适用于 Emotion。

  3. 点击安装按钮安装扩展。

  4. 要再次显示浏览器面板,请在 Windows 上按Ctrl+Shift+E或在 Mac 上按Cmd+Shift+E

这是安装在我们项目中的 Emotion,并在 VisualStudio 代码中进行了很好的设置。

设置应用组件的样式

让我们通过执行以下步骤,用 Emotion 设计App组件:

  1. 首先,通过右键单击App.module.css文件并选择删除选项来删除该文件。
  2. App.tsx中,删除表示import styles from './App.module.css'的行。
  3. Remove the React import statement from App.tsx.

    重要提示

    在 React 17 及更高版本中,不再需要包含 Reactimport语句来呈现 JSX,就像在App.tsx中一样。但是,如果我们想使用库中的函数,比如useStateuseEffect,仍然需要 Reactimport语句。

  4. 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 */注释;否则,透明过程将出错。同样重要的是,将其放在文件的顶部。

  5. On the App component's div element, remove the className prop and use the css 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(````中定义的样式。

  6. 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 the src 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';

    在这里,我们定义了六种灰度、两种应用原色、两种强调色,以及我们将用于标准字体大小的字体系列。

  7. 让我们将需要的变量导入App.tsx

    cs import { fontFamily, fontSize, gray2 } from './Styles';

  8. 现在,我们可以使用插值在 CSS 模板文本中使用这些变量:

    ``cs <div css={css font-family: ${fontFamily}; font-size: ${fontSize}; color: ${gray2}; `}

    ```

祝贺您–我们刚刚用 Emotion 设计了我们的第一个组件!

让我们探索一下 running 应用中的样式。这将有助于我们理解 Emotion 是如何运用风格的:

  1. 让我们在终端中通过执行npm start来运行应用。
  2. Let's inspect the DOM on the browser page by pressing F12:

    Figure 4.7 – App component styled with Emotion

    图 4.7–使用 Emotion 设计的应用组件

    我们可以看到,我们所设计的 AUT0T0 元素有一个类名,从类名 T1 开始,以组件名结尾,中间有一个唯一的名称。CSS 类中的样式是我们在组件中使用 Emotion 定义的样式。所以,Emotion 并不像我们想象的那样生成内联样式。相反,Emotion 生成的样式保存在独特的 CSS 类中。如果我们查看 HTML 标题,我们将看到在style标记中定义的 CSS 类:

    Figure 4.8 – Emotion styles in the head tag

    图 4.8–head 标签中的 Emotion 风格

    因此,在应用的构建过程中,Emotion 已经将样式转换为真正的 CSS 类。

  3. 在终端中按Ctrl+C,如果提示停止应用运行,则按Y

  4. 与 CSS 模块相比,使用 Emotion 的优势在于能够在 CSS 中使用变量。我们刚刚使用它来定义一些常见的样式属性,并在App组件中使用它们。在本书中,我们将使用样式中的变量,其中逻辑驱动组件上的样式。

设置收割台组件的样式

我们可以通过执行以下步骤,为Header组件设置 Emotion 样式:

  1. 首先删除Header.module.css文件。
  2. 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';

  3. Now, we can remove the className property and define the following style on the div 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 模块中相同的样式。

  4. AppHeader组件现在的样式与 CSS 模块方法相同。在下一节中,我们将继续设计Header组件,学习 Emotion 的更多特征。

使用 Emotion 设置伪类和嵌套元素的样式

在这一节中,我们将学习如何用 Emotion 风格化伪类。然后,我们将继续学习如何设置嵌套元素的样式:

  1. 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 ```

    在这里,我们将应用名称设置为相当大、粗体和深灰色,并删除下划线。

  2. 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; `} />

    在这里,我们使用标准字体系列和大小,并为搜索框提供浅灰色圆形边框。

  3. 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 a focus pseudo-class selector, as follows:

    cs <input type="text" placeholder="Search..." css={css` … :focus { outline-color: ${gray5}; } `} />

    伪类通过嵌套在输入的 CSS 中来定义。该语法与在常规 CSS 中相同,在伪类名及其 CSS 属性前加一个冒号(:),放在花括号内。

  4. 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 ```

    这些样式在图标和链接内的文本周围添加了一些空间,并删除了其中的下划线。当链接具有焦点时,我们还使用伪类选择器更改了链接周围线条的颜色。

  5. 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 ```

  6. 下一步是在Icons.tsx文件中设置UserIcon组件的样式。让我们将以下内容添加到文件的顶部:

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

  7. Now, we can define the styles on the img element, replacing the width attribute:

    cs <img src={user} alt="User" css={css` width: 12px; opacity: 0.6; `} />

    我们已经将宽度从img标记上的属性移到了它的 CSS 样式中。现在,图标是一个很好的大小和似乎是一个小的颜色较轻。

  8. 让我们在终端中执行npm start来运行应用。

  9. 如果我们看看 running 应用,我们会发现我们的应用标题现在看起来好多了:

Figure 4.9 – Fully styled header

图 4.9–全样式标题

我们正在掌握情绪的窍门。

定义样式属性的语法与在 CSS 中定义属性完全相同,如果我们已经很了解 CSS,这很好。我们甚至可以用类似于在 SCS 中嵌套 CSS 属性的方式来嵌套 CSS 属性。

样式的剩余部分是HomePage——我们将在下一步讨论它。

创建具有 Emotion 的可重用样式组件

在本节中,我们将学习如何在对HomePage组件进行样式化的同时创建可重用的样式的组件。让我们执行以下步骤:

  1. 我们将从Page.tsx中的Page组件开始,并在文件顶部添加以下行:

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

  2. 让我们设计div元素的样式,并将页面内容放在屏幕中央:

    ``cs export const Page = ({ title, children }: Props) => ( <div css={css margin: 50px auto 20px auto; padding: 30px 20px; max-width: 600px; `}

    ); ```

  3. 让我们转到HomePage.tsx并在文件顶部添加以下行:

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

  4. 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>
    

    ```

    这会将页面标题和提问按钮放在同一行。

  5. 现在,让我们打开PageTitle.tsx并设计页面标题。在文件顶部添加以下行:

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

  6. 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} ```

    这将减小页面标题的大小并使其大写,从而使页面内容更加突出。

  7. 最后,我们有提问按钮,这是主页上的主要按钮。最终,我们将在几个页面上设置主按钮,因此让我们在Styles.ts文件中创建一个可重用PrimaryButton样式的组件。首先,我们需要从 Emotion 中导入样式化的函数。因此,将这一行添加到文件的顶部:

    cs import styled from '@emotion/styled';

  8. 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`。

    因此,这个样式化的组件创建了一个带有我们选择的原色的平面、略圆的按钮。

  9. 让我们将其导入到HomePage.tsx文件中:

    cs import { PrimaryButton } from './Styles';

  10. 现在,我们可以用我们的PrimaryButton样式的组件

    cs <Page> <div ... > <PageTitle>…</PageTitle> <PrimaryButton onClick={handleAskQuestionClick}> Ask a question </PrimaryButton> </div> </Page>

    替换HomePageJSX 中的button标记 11. If we look at the running app, we'll see that it's looking much nicer:

    Figure 4.10 – Styled page title and primary button

图 4.10–样式化页面标题和主按钮

在主页的样式设计方面还有很多工作要做,例如呈现未回答问题的列表。我们将在下一节中进行此操作。

完成主页样式设置

在本节中,我们将完成主页上的样式设置。

设置问题列表组件的样式

让我们通过以下步骤对QuestionList组件进行样式设计:

  1. 打开QuestionList.tsx并在文件顶部添加以下行:

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

  2. 同时导入以下常用样式:

    cs import { accent2, gray5 } from './Styles';

  3. 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元素将显示为没有项目符号的圆形边框。顶部边框将略厚,并采用强调色。我们添加了一个方框阴影,使列表稍微突出一点。

  4. Now, let's style the list items:

    ```cs <ul ...

    <li key={question.questionId} css={cssborder-top: 1px solid ${gray5}; :first-of-type { border-top: none; }}

  5. ```

    列表项上的样式将添加浅灰色上边框。这将作为每个列表项之间的行分隔符。

  6. 如果我们看一下正在运行的应用,未回答的问题容器看起来不错:

Figure 4.11 – Styled unanswered questions container

图 4.11–样式化未回答问题容器

接下来,我们将为问题添加样式。

设置问题组件的样式

按照以下步骤设置组件的样式:

  1. 打开Question.tsx并在文件顶部添加以下行:

    cs /** @jsxImportSource @emotion/react */ import { css } from '@emotion/react'; import { gray2, gray3 } from './Styles';

  2. 让我们为最外层的div元素添加一些填充,如下所示:

    ``cs <div css={css padding: 10px 0px; `}

    {data.title}
    … ```
  3. 在问题标题中添加一些填充,并增加其字体大小:

    ``cs <div css={css padding: 10px 0px; font-size: 19px; `}

    {data.title} ```

  4. 在自选题内容中增加以下样式:

    ``cs {showContent && ( <div css={css padding-bottom: 10px; font-size: 15px; color: ${gray2}; `}

    )} ```

  5. 最后,在提问者的文本周围添加以下样式:

    ``cs <div css={css font-size: 12px; font-style: italic; color: ${gray3}; `}

    {Asked by ${data.userName} on ${data.created.toLocaleDateString()} ${data.created. toLocaleTimeString()}} ```

  6. 如果我们现在查看 running 应用,我们将在主页上看到以下样式:

Figure 4.12 – Completed home page styling

图 4.12–完成的主页样式

这就完成了主页上的样式设置。现在看起来好多了。

总结

在本章中,我们学习了设计 React 应用的不同方法。我们现在了解到,JS 库中的 CSS 自动将样式范围限定到组件,并允许我们在样式中使用动态变量。

我们了解如何使用 JS 库中的 Emotion CSS 使用其css道具为 React 组件设计样式。我们可以通过将伪类嵌套在cssprop 样式字符串中来设置伪类的样式。

我们知道如何使用 Emotion 中的styled函数创建可重用样式的组件。这些可以在我们的应用中作为常规 React 组件使用。

在下一章中,我们将向我们的应用添加更多页面,并学习如何实现这些页面的客户端路由。

问题

尝试回答以下问题以测试您对本章的知识:

  1. 在 CreateReact 应用中,CSS 模块的文件名约定是什么?
  2. 下面代码块中的 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> ); };

  3. 在上一个问题的SubmitButton部分中,当提纲有焦点时,我们如何删除提纲?

  4. 在我们的问答应用中,我们创建了一个只包含样式的PageTitle组件。我们如何将其更改为可重用的样式化组件?
  5. 我们在一些 JSX 中有以下输入元素。我们如何设置占位符文本的样式,使其具有#dcdada颜色?

    cs <input type="text" placeholder="Enter your name" />

答案

  1. 文件命名约定为ComponentName.module.css。例如,Footer.module.css将是Footer组件的 CSS 模块。
  2. 问题是背景颜色设置为'primaryAccent'字符串,而不是常量。css道具应设置如下:

    ``cs <button css={css background-color: ${primaryAccent1}; `}

    {children} ```

  3. 我们可以使用如下的focus伪类:

    ``cs <button css={css background-color: ${primaryAccent1}; :focus { outline: none; } `}

    {children} ```

  4. 我们可以使用以下样式化组件:

    cs export const PageTitle = styled.h2` font-size: 15px; font-weight: bold; margin: 10px 0px 5px; text-align: center; text-transform: uppercase; `;

  5. 我们可以按如下方式设置占位符伪元素的样式:

    cs <input type="text" placeholder="Enter your name" css={css` ::placeholder { color: #dcdada; } `} />

进一步阅读

以下是一些有用的链接,您可以了解有关本章所涵盖主题的更多信息: