scss样式穿透>>>或/deep/或::v-deep

发布时间 2023-12-30 21:31:24作者: 树山君

参考:https://www.jianshu.com/p/7f38b0aa6fb7

<style scoped>
.menuItem {
  //常用方式1,2
  >>> .ant-input {
    border-radius: 50px;
  }
  /deep/ .ant-input {
    font-size: 14px;
  }
  //在scss,less,sass等解析器中
  ::v-deep .ant-input {
    color: red;
  }
}
</style>

微信小程序

//微信小程序,官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html
export default {
  options: { styleIsolation: 'shared' }
}
`styleIsolation` 选项从基础库版本 2.6.5 开始支持。它支持以下取值:
    `isolated` 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
    `apply-shared` 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
    `shared` 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 `apply-shared` 或 `shared` 的自定义组件。(这个选项在插件中不可用。)