使用element-plus時重寫樣式不起作用的問題及解決方法

更新時間：2023年09月19日 15:16:03 作者：專業(yè)研究祖?zhèn)鰾ug編寫術

這篇文章給大家介紹使用element-plus時重寫樣式不起作用的問題及解決方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

使用element-plus時重寫樣式不起作用的問題及解決方法

要修改 Element Plus 組件的樣式，可以使用深度選擇器。深度選擇器是一種特殊的 CSS 選擇器，可以選擇組件內部的元素并修改其樣式。

例如，要修改 ElButton 組件的文字顏色，可以使用以下代碼：

<template>
  <el-button class="my-button">點擊按鈕</el-button>
</template>
<style scoped>
.my-button >>> .el-button__text {
  color: red;
}
</style>

在這個示例中，我們使用 .my-button >>> .el-button__text 選擇器來選擇 .el-button 組件內部的 .el-button__text 元素，并修改其顏色為紅色。

需要注意的是，深度選擇器 >>> 僅適用于有作用域的樣式（例如在 scoped 中）。如果您使用全局樣式，則應該使用 /deep/ 或 ::v-deep 來實現(xiàn)類似的效果。

補充：vue3項目引入element-plus模塊樣式不生效問題解決

問題描述

手動創(chuàng)建vue3項目后，在搭建頁面時需要使用UI庫 element-plus 時，按照官方給的步驟操作之后，很遺憾樣式并沒有生效，上網查了，眾說紛紜，有的說是卸載 element-plus 后重新安裝，但是我的問題還沒有解決，后來在一篇文章中找到了答案，這里記錄一下，希望能幫到有同樣問題的你。好了，直接看解決辦法。

1.安裝element-plus

進入項目根目錄下，命令 npm install element-plus --save 安裝完成后可打開 package.json 文件查看是否安裝成功

2.引入element-plus

找到項目下的 main.js 文件，添加代碼如下：

//引入element-plus模塊
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//use方法使用ElementPlus
createApp(App).use(store).use(router).use(ElementPlus).mount('#app');