如何更改 Ionic react 中 CSS 节点模块的内容？答案

【问题标题】：How to change the content of CSS node modules in Ionic react?如何更改 Ionic react 中 CSS 节点模块的内容？
【发布时间】：2021-07-22 19:04:39
【问题描述】：

有什么方法可以改变 Ionic React 中 CSS 节点模块的内容吗？我为我的应用程序创建了一些外部 css，但是 import "@ionic/react/css/typography.css" 中的 css 覆盖了我的 css。例如，我无法更改某些边距、文本颜色等。我还尝试更改typography.css 中的一些css，但更改未加载到应用程序中。就好像我在typography.css 中什么都没做。
我第一次在 Ionic App 中使用 CSS，我感到非常困惑。任何帮助将不胜感激。

【问题讨论】：

标签： html css reactjs ionic-framework frontend

【解决方案1】：

Ionic 正在使用 Shadow DOM，您可以在 their blog post 中了解更多信息。此功能对于隔离组件非常有用，但它也阻止您从外部修改 css。

为了解决这个问题，Ionic 引入了很多custom CSS Variables 可以用来修改每个组件的样式。这是修改 Ionic 应用的 CSS 的最佳方式。

您还可以在another blog post 和 he docs 中阅读有关阴影部分的信息，但不太推荐这样做。

【讨论】：

感谢您的回答。我已经覆盖了 Ionic CSS 变量，例如更改了我的应用程序的主要颜色和次要颜色。如果我想添加这个 css 行： ion-button { --size: small;我应该在哪里添加它？在 variable.css 中不起作用。根本不考虑。
--size 实际上并不是 Ionic 提供的 css 变量。尝试使用ion-button { --background: red; }，您应该会看到不同。对于大小，您可以使用 html 中的属性，例如 <ion-button size="small">
是的，你是对的。它适用于除大小之外的其他变量。谢谢你:)

【解决方案2】：

因为 Ionic 使用 Shadow Dom，你可以用 CSS 覆盖它，比如 Ionic Variables --background 和 --color

ion-button { --background: red; }

但是很多时候变化并没有体现在Shadow Root的所有组件中

要修改 Shadown Root 的 css，您可以使用伪元素 :: 部分，如本出版物 CUSTOMIZE CSS SHADOW PARTS 中所示，例如：

ion-button 部分是“原生的”，所以你可以使用

  ion-button::part(native){
    height: 100px;
    width: 300px;
}

【讨论】：