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

Question

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

border: 1.2px solid #697954; 

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

--border-color

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

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

众所周知，我的边框颜色已正确完成，但我需要更改 onclick 背景颜色和 onclick 文本颜色。我不想再通过论坛挖掘。

Answer 1

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

有许多指南可提供有关造型 shadow doms 的更多信息，例如：https :
//www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/

可以在此处找到与应用于按钮的示例类似的讨论： Ionic 4 自定义样式 Shadow DOM

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

例如，如果我想查看ion-range组件可用的变量，我会查看range.md.scss 文件：

: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）。