一、问题描述

因为大创的缘故，需要做出一个网站，在搭建网站的过程中需要使用Naive UI框架，在设置样式的时候一直无法修改默认样式。小白不知道应该如何使用样式穿透，同时和Naive UI相关的博客比较少，导致只能自己一步步摸索，所幸，找到了最后的解决办法。（注意，这个解法可能只适合Naive UI。）

二、解决办法

使用F12按键打开开发者模式，一步步找到我们想要修改样式的地方。
比如我想要修改的位置为n-menu中的字体大小和字体颜色，我们定位到和n-menu部件相关的地方:

我们可以看到div中有n-menu之时，我们就可以确定这是由n-menu编译而来的div。我们如果想要修改字体样式，可以不使用vue的样式穿透，可以直接修改style中的东西。
样例:
我们想要修改n-menu中默认样式，可能会想到使用class进行修改，代码示例如下：

<template><n-menu  mode="horizontal" class="menu-class"></n-menu>
</template>
<script>
export default {
// ...
}
</script>
<style>
.menu-class {font-size: 20px;color: rgb(255, 254, 245);
}
</style>

我们可以发现这样的设置毫无作用，最后经历多次尝试，我们可以直接修改上图中的style中的内容:

<template><n-menu  mode="horizontal" style="--n-item-text-color: white; --n-font-size: 17px;"></n-menu>
</template>

我们将项目编译之后，我们就可以看到样式被修改了。问题解决。

Naive UI修改默认样式相关推荐

Vue 内嵌微信登录二维码及修改默认样式
1. index.html 引入微信官方提供的js文件 <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/w ...
(Select)解决：Element-ui 中的 Select 组件用(深度)选择器修改默认样式不生效的问题及如何使用 popper-append-to-body=“false“ 属性
1.存在修改默认样式不生效问题的展示: A.问题一:虽然通过深度选择器修改了下拉框的背景等样式问题却没有展示: B.问题二:渲染后的 dom 元素并不在 #app 元素内部: // 发现:修改下拉框默 ...
element ui需要引入样式吗_ElementUI 修改默认样式的几种办法
ElementUI 是一套ui组件库,目前最新版本 react 和 vue 等主流框架都有支持.该库默认主题色是天蓝色,若用于项目开发,难免遇到要需求修改其默认样式的情况,本文就基于 react 和 ...
「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记
一.Element修改下拉框角标就比如我最近遇上的一个问题,想要重定义 element 组件库中的下拉选择框的角标,一直不知道怎么覆盖才好. 最后才知道是由伪元素做的. 如果我们想要重定义eleme ...
element-ui 通过变量修改默认样式
项目用的是 element-ui + vue 项目里有个需求是要修改 element 消息提示组件中 warning 类型的背景色和那个小感叹号的背景色有两种方式,第一种比较简单,用 F12 找到想 ...
三分钟教你Word修改默认样式
目录寻找默认样式的路径创建自己的.dotm文件补充多常见多模板样式库替换默认样式--说到底就是替换一个word默认的.dotm文件寻找默认样式的路径此时就会默认打开word的默认样式的 ...
解决Naive UI和Tailwindcss样式覆盖问题【日常记录，可供参考】
当项目中同时使用到 Naive UI 和 Tailwindcss 时,出现了样式覆盖问题,Tailwindcss 样式直接将 Naive UI 样式覆盖导致无法正常使用 :: 解决方案方式一在 m ...
完美解决audio自定义修改样式。完整demo，可直接复用copy。修改默认样式
这个是完整demo,可以复用.请把代码直接复制,打开页面查看效果更好.知识点在下方. <!DOCTYPE html> <html lang="en"> &l ...
饿了么element UIel-dialog弹出层/el-dialog修改默认样式不能在style scoped修改
如果在非scoped下,修改el-dialog自动添加的DIV类名的style加上important,可以覆盖原来的width,但这样会让整个项目的样式都乱套. 如果在scoped下修改style.所 ...

Naive UI修改默认样式

一、问题描述

二、解决办法

Naive UI修改默认样式相关推荐

最新文章

热门文章