如何将自定义CSS应用于Ionic 4组件？

Question

如何将自定义CSS应用于Ionic 4组件？

3

我经常遇到一个问题，就是不知道如何更改Ionic组件的CSS样式。比如说，我现在想要修改一个按钮的外观，我的初步想法是通过覆盖它的轮廓或边框颜色来实现。

border: 1.2px solid #697954;

但是那并没有起作用，所以我不得不在论坛帖子中挖掘，直到我发现它已经改变为

--border-color

这种方法似乎是寻找如何覆盖ionic组件css变量的极其低效的方法。

我应该在哪里找到ionic正在使用的确切css组件，以便我可以轻松地覆盖它们而不必查阅论坛文章？我已经在github上检查了ionic core.css，但那并没有给我想要的信息。

我现在已经正确完成了边框颜色，但我需要更改onclick背景颜色和onclick文本颜色。我不想再次深入研究论坛。

- Snoozy

可能是 Ionic 4 自定义样式 Shadow DOM 的重复问题。 - chrismclarke

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chrismclarke · Accepted Answer

自Ionic 4起，组件视图被封装在影子DOM中，因此并不是设计为易于用CSS覆盖。每个组件都有自己的文档，说明如何覆盖常见的CSS属性，如下所示:
https://ionicframework.com/docs/api/button#css-custom-properties 有许多指南可用于了解更多关于样式化影子DOM的信息，例如：
https://www.joshmorony.com/styling-a-shadow-dom-in-ionic-4/ 类似的讨论可以在这里找到，应用于按钮的示例： Ionic 4 custom styling Shadow DOM 在某些情况下，Ionic文档并不总是及时更新组件可用的最新CSS变量。查找组件的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）的变量。