知识森林

Appearance

On this page

样式配置 ​

系统主题设置 ​

因为ant-design-vue是使用 less 开发的，所以既然用了它，咱最好还是用和它一致的less。目前系统使用的less变量如下，如果我们希望替换或增加新的变量，请在src/assets/style/var.less中配置:

less
@primary-color: #269ac1;    // 主题色
@header-bg-color: #fff; // 亮色主题header区域背景
@header-bg-dark-color: #3c4252;	// 暗色主题header区域背景
@content-bg: #f4f7f9;  // 内容区域背景色

@white: #fff;

更多配置，请参考: ant-design-vue 定制主题less变量

开启 scoped ​

如果没有加 scoped 属性，默认会编译成全局样式，可能会造成全局污染!

深度选择器 ​

使用 scoped 后，父组件的样式将不会渗透到子组件中, 如果你希望 scoped 样式中的一个选择器能够作用得“更深”,可以使用以下方式解决:

less
<style lang="less" scoped>
    // 深度选择
    :deep(.dt-table) { }

    // slot内容-深度
    :slotted(.header-top) { }

    // 一次性的-深度
    :global(.header-top) { }
</style>

重复引用问题(高级) ​

针对变量，mixin或extend, 如果我们期望只使用文件中的一个或几个方法，那么css不应该编译整个被引入的文件。

less
<style lang="less" scoped>
    @import (reference) '../../test/var.less';
<style>