Question

我正在寻找在Ionic 4中更改组件样式（例如字体大小）的最佳实践。我读过很多资料，但不清楚什么是最好的方法。

据我了解，每个组件都有一个SCSS文件，可用于设置该组件的样式，global.scss用于全局更改。

这里是否有特殊考虑？例如，使用元素名称合适还是应该首选类？

当样式在平台之间变化时该怎么办？最好用类似...

ion-card-header {
    .ios & {

    }
    .md & {

    }
}

要全局更改，将其添加到全局SCSS吗？

还有如何正确使用CSS变量。

请寻找想法和最佳实践，以及任何有关Ionic 4结构的注意事项。

Answer 1

我可以自己回答这个问题，以收集我一直在查看的信息。

实用程序属性- text-wrap，no-padding等。

Ionic 4包含许多utility attributes，可用于在可用的位置修改元素。示例包括text-wrap或padding-start。

这些可以应用于任何元素，以通过使用属性来调整样式。这是仅适用于单个案例且不会从规则中受益的更改的首选方法。

实用程序包括：

文字修改
- 文本中心，文本换行，文本大写等
元素放置
- float-left，float-end等
内容空间
- padding-start（在开始时添加16px的填充），no-padding，margin-bottom等。
Flex属性
- 使内容均匀对齐，对齐项目基线，nowrap，对齐自我中心等。

对于文本修改和元素放置属性，它们具有响应版本，例如text-lg-center或float-sm-end。

CSS变量- --color，--padding-start等

Ionic 4使用CSS Variables（more on CSS Variables）构建，替换了SCSS变量并启用了运行时更改。

全局CSS变量- --ion-color-primary，--ion-color-primary-contrast等

颜色变量
- -ion-color-primary，-ion-color-primary-contrast等。
应用程序变量
- -ion-font-family，-ion-grid-padding-md等。

这些将在下面更详细地描述。

全局颜色CSS变量

主题颜色应用于整个应用程序中使用的任何颜色。 Ionic 4开箱即用提供9种主题颜色，可用于更改许多组件的颜色。示例包括：

<ion-button>Default</ion-button>
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>

修改颜色变量

更改颜色时，应设置所有适当的变量，例如...

:root {
  --ion-color-secondary: #006600;
  --ion-color-secondary-rgb: 0,102,0;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255,255,255;
  --ion-color-secondary-shade: #005a00;
  --ion-color-secondary-tint: #1a751a;
}

colour generator可用于为基色生成这些颜色。使用SCSS不能完成此操作，因为它需要在运行时工作。支持此are being worked on的解决方案。

添加颜色

在整个应用程序can be added中使用的新颜色，作为修改默认颜色的替代方法。

修改背景颜色或文本颜色

修改背景颜色或文本颜色变量时，也会有大量need to be updated的步进颜色。一个例子是...

:root {
    --ion-background-color: #ffffff;
    --ion-background-color-rgb: 255, 255, 255;
    --ion-text-color: #000000;
    --ion-text-color-rgb: 0, 0, 0;
    --ion-color-step-50: #f2f2f2;
    --ion-color-step-100: #e6e6e6;
    --ion-color-step-150: #d9d9d9;
    --ion-color-step-200: #cccccc;
    --ion-color-step-250: #bfbfbf;
    --ion-color-step-300: #b3b3b3;
    --ion-color-step-350: #a6a6a6;
    --ion-color-step-400: #999999;
    --ion-color-step-450: #8c8c8c;
    --ion-color-step-500: #808080;
    --ion-color-step-550: #737373;
    --ion-color-step-600: #666666;
    --ion-color-step-650: #595959;
    --ion-color-step-700: #4d4d4d;
    --ion-color-step-750: #404040;
    --ion-color-step-800: #333333;
    --ion-color-step-850: #262626;
    --ion-color-step-900: #191919;
    --ion-color-step-950: #0d0d0d;
}

这些可以是easily generated。

全局应用程序CSS变量

许多全局application variables可用。这些应该在可能的地方使用。示例包括--ion-font-family，--ion-padding和--ion-margin。最后两个修改了上面讨论的实用程序属性用于填充和边距的值。

全局网格CSS变量

许多全局grid variables可用。这些应该在可能的地方使用。示例包括--ion-grid-columns和--ion-grid-padding-xl。

组件CSS变量

组件接受的CSS变量可以在API Reference的条目的“自定义属性”部分中找到。

例如，请参见Custom Properties for ion-button，例如--ripple-color或--color-activated。

设置CSS变量

要设置全局变量，请使用src/theme/variables.scss文件，然后在:root选择器上进行设置，例如...

:root {
  /* Set the font family of the entire app */
  --ion-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Roboto", sans-serif;
}

要设置组件变量，请使用组件选择器，例如...

/* Set the color on all ion-button elements */
ion-button {
  --color: #222;
}

CSS变量应用于修改可用的组件。

获取CSS变量

要获取CSS变量，应使用var() CSS function，它允许使用任意数量的后备值，例如...

.fancy-button {
  --background: var(--charcoal, #36454f);
}

平台样式

应使用.ios和.md选择器来更改特定于平台的样式，例如：

.ios ion-badge {
  text-transform: uppercase;
}

应该在可用的地方使用全局变量，例如：

.ios {
  --ion-background-color: #222;
}

在Ionic 4中自定义组件样式的最佳实践

1 个答案: