ionic4关于CSS Custom Properties修改组

2019-03-27 本文已影响0人昵称已被使用_

ionic4组件大量使用Shadow DOM，如下图，它的目的就是把组件生成的html和样式隔离起来，不受我们自定义的样式影响，也就是说不能随便修改这里面的样式；关于Shadow DOM的更多介绍可以点这里、点这里、点这里
Shadow DOM的样式不能修改，所以ionic给我们提供了修改接口，也就是css变量，所以你会在官网每个组件文档中看到CSS Custom Properties(如下图一)，它提供了常用的变量让我们自定义样式(如下图二)，注意每个组件提供的css变量是不一样的。更多关于css变量你可以点这里

图1

图2

如何使用ionic提供的css变量？如下图，在mine.page.scss中使用ionic提供的自定义变量修改组件样式，假如你使用background-color: red;修改ion-content的背景色，那肯定是无效的
如下图，如果你在全局样式文件variables.scss中定义变量，那就相当于修改了组件的默认样式
这时候你可能会想，如果想修改某个样式，但是ionic没有提供变量，那怎么修改？结论是：如果ionic在ShadowDOM中定义了样式，并且没有提供修改变量，那我们是不能修改的；但是有几种情况你需要知道
情况1：
假如你想修改css background-size属性，ionic没有提供类似--background-size的变量，但是它提供了--background, css background就可以设置background-size，下图链接

情况2：
组件ShadowDOM中定义的样式我们不能修改，但未定义的样式，我们可以自定义

情况3：
默认情况下ion-input和ion-select组件的placeholder样式不一致，如下图，ion-select的placeholder样式颜色更浅

从下图1可以看到ion-select用到ShadowDOM，并且写死了opacity: .33;，这样我们就无法修改placeholder的opacity值了，但是，我们可以修改ion-input的--placeholder-opacity变量；如下图2修改ion-input后最终效果达到一致
图1
图2
ion-datetime的placeholder也和ion-select不一样，可以这样设置

  ion-datetime {
    --placeholder-color: rgba(0, 0, 0, 0.33);
  }

如下图看到color: currentColor;这个currentColor是什么？它是css3的一个颜色关键字，代表的意思是：当前颜色为当前元素或父元素的color值；举个例子：设置一个div的border-color:currentColor,当你修改div的字体颜色时(color属性)，div的边框颜色也跟着字体颜色变了；更多详情看MDN；所以下图，我们可以修改ion-select的color属性来改变ion-select的placeholder颜色（下图2）

图2

最后