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

Question

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

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

这里有什么特别的考虑吗？例如，使用元素名称合适吗?还是应该首选类？

那么，当不同的平台之间的样式不同时呢？最好的办法是.

ion-card-header {
    .ios & {

    }
    .md & {

    }
}

若要在全球范围内进行更改，请将其添加到全球SCSS中？

另外，如何适当地使用CSS变量。

寻找想法和最佳实践请，和任何特别的考虑Ionic 4的结构。

Answer 1

我正试着亲自回答这个问题，收集我一直在看的信息。

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

离子4包括许多效用属性，可用于修改可用的元素。例子包括text-wrap或padding-start。

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

公用事业包括：

• 文本修改
  • 文本中心，文本包装，文本大写等.

​

• 单元布局
  • 浮动-左，浮动-末端等。

​

• 内容空间
  • 填充-开始(在开始时添加16 no填充)，无填充，边缘底部等.

​

• Flex特性
  • 调整-内容-均匀，对齐-项目-基线，现在，对齐-自我中心等.

​

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

CSS变量- --color__，--padding-start等。

离子4是使用CSS变量 (关于CSS变量的更多信息)构建的，它取代了SCSS变量，并启用了运行时更改。

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

• 颜色变量
  • -离子-颜色-初级，-离子-颜色-初级-对比度等。

​

• 应用变量
  • -离子-字体-家族，-离子网格-填充-md等。

​

下文将对这些问题作更详细的说明。

全局颜色CSS变量

主题颜色应用于整个应用程序中使用的任何颜色。离子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;
}

彩色发生器可以用来生成基色的这些。它不能用SCSS完成，因为它需要在运行时工作。支持此正在研究中的解决方案。

加色

在整个应用程序可加中使用的新颜色，作为修改默认颜色的替代方案。

修改背景颜色或文本颜色

当修改背景颜色或文本颜色变量时，大量的阶梯式颜色也是需要更新。一个例子是..。

: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;
}

这些可以是容易生成。

全局应用程序CSS变量

有许多全局应用变量可用。这些应该在可以使用的地方使用。例如--ion-font-family、--ion-padding和--ion-margin。最后两个修改了上面讨论的用于填充和边距的实用程序属性所使用的值。

全局网格CSS变量

有许多全局网格变量可用。这些应该在可以使用的地方使用。例子包括--ion-grid-columns和--ion-grid-padding-xl。

组件CSS变量

组件接受的CSS变量可以在API参考中其条目的component部分中找到。

例如，请参阅离子按钮的自定义属性，如--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函数，它允许任意数量的回退值，例如.

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

平台造型

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

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

在有全局变量的情况下，应该使用它们，例如：

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