如何在css中修改组件的内置样式

React#

在React中使用:global()来设置组件内部样式。比如要修改andt组件的走马灯样式

.banner :global(.ant-carousel .slick-dots){
  height: 8px;
}

:global()括号里面就是写组件本身的样式声明。

Vue#

Vue有多种写法，但主要使用deep深度选择器

/deep/写法#

sass存在编译解析问题

.handbook .btn-ctrl /deep/ .n-button__border{
    border:none;
}

:deep()写法#

推荐

.handbook .btn-ctrl :deep(.n-button__border{
    border:none;
}

>>>写法#

存在浏览器兼容问题

.handbook .btn-ctrl >>> .n-button__border{
    border:none;
}

::v-deep写法#

v3版本已弃用

.handbook .btn-ctrl ::v-deep .n-button__border{
    border:none;
}