如何在 Ionic React 中使用 Styled Components 实现 CSS

认识 Styled Components

在 React 应用中编写 CSS 时，有很多选项可供选择。许多初次接触 Ionic React 的人常常会疑惑最佳方法是什么。React 库本身并没有对 React 应用中样式的使用方式给出明确建议，那么我们该如何选择呢？

默认情况下，Ionic React 应用使用普通的 CSS 文件，并将其包含在相应的组件中。这是一种行之有效的传统方法，自 Web 开发之初就已存在。然而，这种方法与 React 中编写封装式（但可扩展）组件的理念并不契合。

传统的纯 CSS 方法的一个主要缺点是，它没有内置机制来将 CSS 的作用域限定在特定的页面或组件内。这可能会导致意想不到的副作用，例如样式溢出组件并影响其他元素。

其他需要关注的问题还包括如何扩展组件的样式，以及如何仅使用纯 CSS 将主题应用于组件。

幸运的是，React 生态系统中有一个活跃的社区，已经解决了其中的一些问题。而且，由于 Ionic React 应用本质上就是 React 应用，我们可以自由地在自己的应用中使用它们！

在这篇文章中，我将介绍我最喜欢的库之一——Styled Components，并向您展示如何开始使用它来为您的应用程序添加样式！

认识 Styled Components

Styled Components（以下简称 SC）是一个打破 React 组件样式绑定壁垒的库。使用 SC，您无需声明特定的 CSS 类，也无需担心它们会覆盖项目中的其他类。相反，您只需使用 SC API 声明组件，然后将 CSS“附加”到该组件即可：

const MyButton = styled.button`
  padding: 12px;
  background-color: white;
  color: blue;
`; 

如果您正在使用 VS Code，请务必下载vscode-styled-components扩展，这样在使用 styled-components 时，您就可以获得语法高亮和 CSS 代码补全功能。

上面那些奇特的反引号是 JavaScript 的一个新特性，叫做标记模板字面量（Tagged Template Literals） 。你之前肯定用过并且很喜欢普通的模板字面量（`<template literals> Hello ${name}!`）。标记模板字面量与之类似，但它不像普通模板字面量那样使用默认的字符串插值函数，而是允许你自定义对字符串执行的函数。上面的 `<template styled.buttonliterals>` 函数会接收字面量中的文本，并将其转换为一个带有 CSS 类名的 React 组件。最终，该MyButton组件会生成类似如下的 HTML：

<button class="sc-bdnylx bIGghp">Click Me</button>

SC 会代表你生成唯一的类名，这样你的 CSS 就只作用于你的组件，不会影响应用程序中的其他样式。

入门

安装 SC 非常简单。要将其添加到您的 Ionic React 项目中，请运行：

npm i styled-components @types/styled-components

这将安装 SC 及其类型定义，以便我们可以获得强大的 TypeScript 自动补全和类型检查功能。

接下来，直接从以下位置导入样式化对象styled-components：

import styled from 'styled-components';

然后就可以开始使用该styled对象创建样式化组件了。在上面的第一个示例中，我们创建了一个按钮。但是，样式化对象包含了所有基本的 HTML 元素标签，例如 `<div>` div、a`<span>`、header`<div>` 等等。你还可以扩展其他 React 组件，只要该组件接受className一个 `className` 作为 prop，并且该 className 会被应用到组件渲染的底层 HTML 元素上即可。

将 CSS 作用域限定于 IonPage

使用 Ionic Angular 的一大优势在于，:host组件 CSS 文件中使用伪类选择器定义的样式仅限于该组件。在 Ionic React 中，使用 SC 也能实现同样的效果。下面，我们将通过向 styled 对象IonPage传递参数来创建一个“styled”：IonPage

const MyPage = styled(IonPage)`

`;

在 JSX 中替换IonPage为：MyPage

<MyPage>
  <IonHeader>...</IonHeader>
  <IonContent fullscreen>...</IonContent>
</MyPage>

直接添加样式IonPage其实用处不大。不过，这样做的好处是，我们现在可以针对页面中的其他类进行定位，而不用担心会影响到其他页面。Styled Components 支持 CSS 类嵌套，这个特性我在 SASS 中就非常喜欢，而且在纯 CSS 中也很难割舍（尽管 CSS 将来或许会原生支持嵌套）。所以，我们现在可以开始定义带有类的新元素，并在MyPage组件中定位它们了：

const MyPage = styled(IonPage)`
  .box {
    border: 1px solid white;
    margin: 10px;
    height: 200px;
    width: 200px;
  } 
`;

<MyPage>
  <IonHeader>...</IonHeader>
  <IonContent fullscreen>
      <div className="box"></div>
  </IonContent>
</MyPage>

请原谅我缺乏设计能力，我出生时掷骰子算美学只有2分。

为 Ionic 组件设置样式

设置 Ionic 内置组件的样式非常简单。事实上，您已经在上面的示例中看到了如何操作。接下来，我们来看一个提供更多选项的组件，例如IonButton：

const MyButton = styled(IonButton)`
  --background: green;
`;
...
// And to use it:
<MyButton>Hello!</MyButton>

Ionic 组件是使用 Shadow DOM 的 Web 组件，因此，在 Web 组件外部定义的样式不会影响其内部。为了解决这个问题，Ionic 使用了 CSS 变量，允许开发者设置 Web 组件可以使用的样式。

在上面的示例中，我们设置了backgroundCSSborder-color变量，这些更改只会应用于我们的MyButton组件。

最近，Ionic 还发布了对 Shadow Parts 的支持，它允许 Web 组件开发者暴露 Web 组件的某些部分，并通过 CSS 来定位这些部分。下面的示例与上面的示例相同，但我们通过nativeShadow Parts 来定位原生 HTML 按钮：

const MyButton = styled(IonButton)`
  &::part(native) {
    background-color: green;
  }
`;

如果&指的是父组件本身，那么我们使用part伪选择器来定位native它所IonButton暴露的阴影部分。

从我们的文档中了解更多关于CSS 变量和阴影部分的信息，并查看Ionic 博客上关于阴影部分的这篇文章。

总结

React（以及 Ionic React！）中的 CSS 是一个棘手的主题，但幸运的是，有很多方法可以解决这个问题。

希望我能让您对在 Ionic React 应用中使用 styled-components 的功能有所了解，并让您看到一些可能性。

我刚才只是介绍了 styled-components 最基本的功能，它还有很多其他用途。一旦你掌握了这个库，就能创建非常强大的组件。我建议你访问Styled Component 的文档了解更多信息并亲自尝试一下。

你是如何为你的 Ionic React 应用设计样式的？你还想看到哪些方面的内容？请在下方评论区留言或联系我@elylucas，我​​或许会专门写篇文章来探讨这个问题。

祝您编程愉快！