似乎不可能自由定制Ionic组件

Question

以离子按钮为例。假设我想在 css 中添加一些自定义样式。我有一些固定的样式，我想在术语中始终使用，所以理想情况下，我可以限制我的离子按钮，使它们在使用它们的所有应用程序中保持一致。

简单示例 - 我希望二级和三级按钮默认为轮廓样式。我可以通过创建自定义组件很容易地实现这一点，但这是一种可怕的过度方法。使用离子组件的全部要点是它们足够灵活而有用。但我发现情况并非如此。

  // Defaults
  display: inline-flex; // Make sure button doesn't take full width by default
  align-items: center;
  justify-content: center;
  text-transform: none !important; // Disable uppercase globally for ion-buttons (need to force it!)
  padding: 0; // Ionic adds 5px padding top & bottom
  margin: 0; // remove outer margin (beyond the border-box)
  box-sizing: border-box !important;

  // Color theming (default="primary")
  &[color="secondary"],
  &[color="tertiary"] {
    --background: var(--app-bg) !important;         /* Transparent background for outline */
    --border-width: 1px !important;                 /* Add border width */
    --border-style: solid !important;               /* Solid border */
    --border-color: var(--ion-color) !important;    /* Border color matches the button color */
    --color: var(--ion-color) !important;           /* Text color matches the button color */
  }

请注意，我必须使用 !important 来停止 ionic 将所有文本变为大写。很烦人的是默认不优先考虑自定义样式。其目的显然是覆盖默认值。

至于上面的代码尝试覆盖二级和三级按钮的填充和边框等，它成功了一半。这是有史以来最烦人的事情。寄宿生工作。但所有颜色都不起作用。我到处都推了!important，但无济于事。

为什么 ionic 不接受自定义样式。他们希望每个应用程序看起来都一样吗？

Answer 1

您只需使用 CSS 变量即可。您可以使用镶边样式检查器并确定需要更改哪些属性才能达到所需的效果。

由于背景

:host

伪元素的

::after

选择器，我必须使用

!important

来设置按钮背景的样式。

ion-button[color='secondary'],
ion-button[color='tertiary'] {
  --ion-color-base: transparent !important;
  --ion-color-secondary-contrast: var(--ion-color-shade);
  --ion-color-tertiary-contrast: var(--ion-color-shade);
  --color: var(--ion-color-secondary-contrast);

  --border-radius: 0;
  --border-color: var(--color);
  --border-style: solid;
  --border-width: 1px;

}

ion-button[color='secondary']:hover,
ion-button[color='tertiary']:hover {
  --ion-color-tint: transparent !important;
  opacity: 0.5;
}

Stackblitz 演示