ionic4关于CSS Custom Properties修改组件样式

  • 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

最后

  • 现在你应该知道,如果某段样式不生效,除了检查自己代码问题,还要检查是否和ShadowDOM定义的样式冲突
  • ShadowDOM和CSS Variables等都是比较新的技术方案,如果我哪里理解错误请留言指正

其他

https://yanxiaojun617.com/fileService/file/ss/index.html