如何将自定义 css 应用于 ionic 4 组件？

Posted 2023-03-06

【中文标题】如何将自定义 css 应用于 ionic 4 组件？

【英文标题】：How to apply custom css to ionic 4 components?

【发布时间】：2019-12-29 05:46:09

【问题描述】：

我经常遇到不知道要为离子组件更改什么 css 的问题。例如，我有一个使用 ionic 勾勒的按钮，我最初的猜测是用类似的东西覆盖它的轮廓/边框颜色。

border: 1.2px solid #697954; 

但这没有用，所以我基本上只需要浏览论坛帖子，直到我发现它改变了

--border-color

这似乎是一种非常低效的查找如何覆盖离子组件 css 变量的方法。

我在哪里可以找到确切的 css ionic 用于其组件的内容，这样我就可以轻松地覆盖它们而无需浏览论坛帖子？我在 github 上检查了 ionic core.css，但这并没有给我想要的信息。

知道我的边框颜色设置正确，但我需要更改 onclick 背景颜色和 onclick 文本颜色。我不想再翻遍论坛了。

【问题讨论】：

Ionic 4 custom styling Shadow DOM的可能重复

【参考方案1】：

从 Ionic 4 开始，组件视图被封装在一个 shadow dom 中，因此不能轻易地被 css 覆盖。每个组件都有自己的文档来说明如何覆盖常见的 CSS 属性，例如：https://ionicframework.com/docs/api/button#css-custom-properties

有许多指南可用于了解有关设置 shadow dom 样式的更多信息，例如：https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/

可以在此处找到与应用于按钮的示例的类似讨论： Ionic 4 custom styling Shadow DOM

在某些情况下，Ionic 文档并不总是与组件可用的最新 CSS 变量保持同步。找出可用变量的可靠方法是在 Github 上查看组件 CSS 的主源代码。

例如，如果我想查看ion-range 组件可以使用哪些变量，我会查看range.md.scss file：

:host 
  --knob-border-radius: 50%;
  --knob-background: var(--bar-background-active);
  --knob-box-shadow: none;
  --knob-size: 18px;
  --bar-height: #$range-md-bar-height;
  --bar-background: #ion-color(primary, base, 0.26);
  --bar-background-active: #ion-color(primary, base);
  --bar-border-radius: 0;
  --height: #$range-md-slider-height;
  --pin-background: #ion-color(primary, base);
  --pin-color: #ion-color(primary, contrast);

  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);

  font-size: $range-md-pin-font-size;

在这里我们可以看到主机组件的所有可用变量（在本例中为ion-range）。

【讨论】：

谢谢！这是对我的问题的非常彻底的回答。我害怕无法在文档中找到最新的东西，所以知道它都在 github 上会为我将来省去一些麻烦。