一、問題描述
因?yàn)榇髣?chuàng)的緣故，需要做出一個(gè)網(wǎng)站，在搭建網(wǎng)站的過程中需要使用Naive UI框架，在設(shè)置樣式的時(shí)候一直無法修改默認(rèn)樣式。小白不知道應(yīng)該如何使用樣式穿透，同時(shí)和Naive UI相關(guān)的博客比較少，導(dǎo)致只能自己一步步摸索，所幸，找到了最后的解決辦法。（注意，這個(gè)解法可能只適合Naive UI。）
二、解決辦法
- 使用F12按鍵打開開發(fā)者模式，一步步找到我們想要修改樣式的地方。
比如我想要修改的位置為n-menu中的字體大小和字體顏色，我們定位到和n-menu部件相關(guān)的地方:
我們可以看到div中有n-menu之時(shí)，我們就可以確定這是由n-menu編譯而來的div。我們?nèi)绻胍薷淖煮w樣式，可以不使用vue的樣式穿透，可以直接修改style中的東西。 - 樣例:
我們想要修改n-menu中默認(rèn)樣式，可能會(huì)想到使用class進(jìn)行修改，代碼示例如下：
<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>
我們可以發(fā)現(xiàn)這樣的設(shè)置毫無作用，最后經(jīng)歷多次嘗試，我們可以直接修改上圖中的style中的內(nèi)容:文章來源：http://www.zghlxwxcb.cn/news/detail-443879.html
<template>
<n-menu mode="horizontal" style="--n-item-text-color: white; --n-font-size: 17px;"></n-menu>
</template>
我們將項(xiàng)目編譯之后，我們就可以看到樣式被修改了。問題解決。文章來源地址http://www.zghlxwxcb.cn/news/detail-443879.html
到了這里，關(guān)于Naive UI修改默認(rèn)樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![input時(shí)間表單默認(rèn)樣式修改（input[type=“date“]）](https://imgs.yssmx.com/Uploads/2024/02/682288-1.png)
