修改naive ui默认样式，css变量值修改

新项目开发使用了naive ui组件库，使用组件时涉及到css样式修改，可以直接在组件父容器上使用组件内自带的css变量，组件会自动继承父容器的css变量值，不会影响其他页面使用；

示例：一个注册表单，两个input间隔高度太大，调整高度，组件使用grid布局，代码截图：

浏览器审查元素查看结构，找到对应的css和变量，如图：

找到需要修改的css变量之后，直接在父容器里修改该变量的值即可，代码如下：

.register-form {width: 280px;::v-deep(.n-form-item .n-form-item-label .n-form-item-label__asterisk) {--n-asterisk-color: red;}::v-deep(.n-form-item .n-form-item-feedback-wrapper) {--n-feedback-height: 10px;}
}

修改完成示意图：

其他组件同理。。。

修改naive ui默认样式，css变量值修改相关推荐

图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
在页面布局时经常会用到input输入框,有时为了提示用户输入正确的信息,需要用placeholder属性加以说明.这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder ...
[vue-element] ElementUI怎么修改组件的默认样式？
[vue-element] ElementUI怎么修改组件的默认样式? 方法一:/deep/ 方法二:>>> 方法三:在外层添加一层div,设置自定义类名,再修改里边的样式, 格式. ...
python 找到目录下文件名规则_Python学习第162课--PATH变量值修改以及模糊查找文件名...
[每天几分钟,从零入门python编程的世界!] 我们在使用Linux系统时,经常会安装很多第三方的程序或文件到电脑上.我们安装程序后,这个程序在电脑上会有一个默认的路径,我们先看看程序安装的默认的路 ...
html怎么设置img样式,css默认样式 css中img默认样式问题
css a标签去掉默认样式是什么? 以下为css a标签去掉默认样式: a { text-decoration:none out-line: nonecolor: #*****;} 层叠样式表(英文全 ...
react中修改antd的默认样式
最近在做react+antd项目.不可避免的遇到了修改antd默认样式的问题. 比如,table组件的表头背景色设置,如果直接使用元素样式,会修改整个项目的table.这里我用的方法是,给table添 ...
html复选框不可修改,如何用【伪类】成功修改HTML checkbox默认样式？（新checkbox覆盖老checkbox无法点击的问题）...
按照一篇博客上的指导,修改checkbox默认样式: (博客地址: https://www.cnblogs.com/GumpY... ) 效果图: 按照博客,我的意图是: 1-把原checkbox 的 ...
项目中如何修改element-ui的默认样式
一.去除scoped 去掉style的scoped,用最外层盒子的class名包裹需要修改组件的class名例: <template> <el-container cla ...
div超出部分出现滚动条并修改滚动条的默认样式
使用overflow的属性 auto 和scroll 可以在内容超出的时候出现滚动条. overflow 设置包括水平和竖直方向内容溢出时的操作 overflow-x 设置水平方向内容溢出时的操作 o ...
html input选中样式,CSS 伪类修改input选中样式的示例代码
注:该表引自W3School教程伪元素的分类及作用: 下面通过代码看下CSS 伪类修改input选中样式的示例代码,代码如下所示: 主要是用到了after伪类和字体符号. input{ -webki ...

修改naive ui默认样式，css变量值修改

修改naive ui默认样式，css变量值修改相关推荐

最新文章

热门文章