Question

我试图在ionic 4中对离子标签（浮动元素）进行着色，但需要在属性中使用！important

<ion-row class="ion-margin-vertical ion-padding-horizontal">
  <ion-col size="12" class="ion-margin-bottom">
    <ion-item>
      <ion-label position="floating">Contact Number</ion-label>
      <ion-input type="number" value="333"></ion-input>
    </ion-item>
  </ion-col>
<ion-row>

我尝试在global.scss中使用自定义样式

ion-label {
  --color: var(--ion-color-step-400) !important;
}

无法执行同样的操作，但是没有用，但是没有用，但是当我使用！important时，它会起作用。这是正确的方法吗？需要帮助。

Answer 1

像下面一样在color="secondary"中使用ion-label

使用!important也是正确的方法，它会覆盖默认的颜色或属性

<ion-row class="ion-margin-vertical ion-padding-horizontal">
  <ion-col size="12" class="ion-margin-bottom">
    <ion-item>
      <ion-label color="secondary" position="floating">Contact Number</ion-label>
      <ion-input type="number" value="333"></ion-input>
    </ion-item>
  </ion-col>
<ion-row>

Answer 2

它从variables.scss文件中引用，该文件具有全套：root css元素集，例如主要，次要，第三，成功，警告，危险，黑暗，中等，浅色，其颜色代码如下。

因此，您可以直接使用这些名称来应用颜色，这些颜色在内部应用于以下属性，您可以根据需要添加更多样式。

  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

您应该能够使用上述默认颜色属性，而无需任何其他操作！重要标志。

但是如果您想应用其他任何替代样式，则需要按照以下CSS标准使用重要的样式。

CSS中的！important属性用于提供比常规属性（在这种情况下为默认离子类）更大的权重（重要性）。在CSS中，！important表示“这很重要”，请忽略所有后续规则，然后应用！important规则

在离子4中设置离子标记的颜色时遇到问题

2 个答案: