元素
元素
工具
博客
问答

Element Plus 描述列表样式不生效怎么办？

司马玉鑫 阅读 58
组件

我在用 Element Plus 的 Descriptions 组件时，想自定义 label 的宽度，但加了 CSS 好像没反应，是不是我写法有问题？

试过在组件外层加 class，也试过用 :deep() 深度选择器，但样式就是不生效，控制台也没报错，有点懵。

.my-desc :deep(.el-descriptions__label) {
  width: 120px !important;
  justify-content: flex-end;
}
UI组件
我来解答 赞 7 收藏
二维码
手机扫码查看
反馈
2 条解答
技术兴翰
技术兴翰 Lv1
有时候 Element Plus 的样式覆盖挺让人头疼的。你试试这样：

<style scoped>

.my-desc /deep/ .el-descriptions__label {

  width: 120px !important;

  justify-content: flex-end;

}

</style>



<template>

  <div class="my-desc">

    <el-descriptions title="User Info">

      <el-descriptions-item label="Username">kooriookami</el-descriptions-item>

      <el-descriptions-item label="Telephone">18100000000</el-descriptions-item>

    </el-descriptions>

  </div>

</template>


/deep/ 是 Vue 中的深度选择器，可以试试看。如果还是不行，确保你的 CSS 文件加载顺序没问题，或者试试全局样式。复制过去试试。
点赞
2026-03-25 13:15
国凤
国凤 Lv1
Element Plus 的样式有时候确实挺 tricky 的，特别是当你想覆盖默认样式的时候。你提到的方法用 :deep() 选择器理论上是对的，但是可能由于样式优先级或者其他原因没生效。一个常见的问题是确保你的样式文件加载顺序正确，或者你的样式选择器不够具体。

你可以试试这样写，增加一点选择器的权重：

.my-desc .el-descriptions__label {

  width: 120px !important;

  justify-content: flex-end;

}


另外，确保你的 .my-desc 类确实在组件的外层。如果还是不生效，可以尝试给你的选择器加一个更深的选择器，比如：

.my-desc .el-descriptions .el-descriptions__table .el-descriptions__cell .el-descriptions__label {

  width: 120px !important;

  justify-content: flex-end;

}


这样可以确保你的样式覆盖了默认的样式。希望这能帮到你，有时候 CSS 就是这么折腾人。
点赞
2026-03-24 17:09
相关推荐
元素
元素
工具
博客
问答
登录/注册