自定义组件中的 Ionic 4 颜色属性

Posted 2023-03-13

【中文标题】自定义组件中的 Ionic 4 颜色属性

【英文标题】：Ionic 4 color attribute in custom components

【发布时间】：2019-11-27 13:44:04

【问题描述】：

我们正在 在 ionic 4 中自定义组件，我们希望它具有像 color 属性这样的离子属性来影响其内部离子组件...... 任何关于如何做到这一点的提示完成了吗？，无需像 `[color]=" 'blue-lagoon' " 之类的常规绑定

【问题讨论】：

覆盖样式表。

【参考方案1】：

要做到这一点很容易......

在这个tutorial里有所有的信息。

但总而言之，您需要执行以下步骤：

1.

去这个page，在这里你找到一个ionic的颜色生成器，你可以使用原色部分，输入你的十六进制颜色，下面是生成该颜色的代码：

例如，我使用 #5e3f53，所以生成它的代码将是：

--ion-color-primary: #5e3f53;
--ion-color-primary-rgb: 94,63,83;
--ion-color-primary-contrast: #ffffff;
--ion-color-primary-contrast-rgb: 255,255,255;
--ion-color-primary-shade: #533749;
--ion-color-primary-tint: #6e5264;

2.

现在转到文件 src/theme/variables.scss 并粘贴到 :root

--ion-color-myCustom: #5e3f53;
--ion-color-myCustom-rgb: 94,63,83;
--ion-color-myCustom-contrast: #ffffff;
--ion-color-myCustom-contrast-rgb: 255,255,255;
--ion-color-myCustom-shade: #533749;
--ion-color-myCustom-tint: #6e5264;

3.

然后转到文件 src/global.scss 并粘贴以下代码：

.ion-color-myCustom 
  --ion-color-base: var(--ion-color-myCustom) !important;
  --ion-color-base-rgb: var(--ion-color-myCustom-rgb) !important;
  --ion-color-contrast: var(--ion-color-myCustom-contrast) !important;
  --ion-color-contrast-rgb: var(--ion-color-myCustom-contrast-rgb) !important;
  --ion-color-shade: var(--ion-color-myCustom-shade) !important;
  --ion-color-tint: var(--ion-color-myCustom-tint) !important;

4

现在您可以在任何地方使用您的自定义颜色，显然使用您定义的名称。

就是这样。

或者，如果我猜你的帖子不允许使用颜色属性，请创建一个类、id 或样式。

并且可以通过这种方式使用您的颜色：

希望对你有所帮助:)