Vuetify的v-card-text内边距设置不生效怎么办？

UX-熙然提问于 2026-02-16 10:26:34 阅读 25

框架

我在用Vuetify的v-card组件时，想给里面的v-card-text加点内边距，但发现设置的padding没生效。试过直接加style样式和自定义CSS类，甚至用了!important，但都不管用。比如这样写：


function MyCard() {
  return (
    <v-card>
      <v-card-text className="custom-padding" style={{ padding: '24px' }}>
        这里的内容需要加间距
      </v-card-text>
    </v-card>
  );
}

页面上的内容还是紧紧贴着卡片边缘，完全没变化。是不是有什么地方没配置对？或者Vuetify有特别的间距设置方式？

我来解答赞 6 收藏

反馈

1 条解答

红爱 Dev Lv1

这问题我遇到过，Vuetify的组件样式是通过CSS变量控制的，直接改padding确实容易被覆盖。正确的做法是用Vuetify提供的spacing工具类，比如给v-card-text加个py-4或者px-3这种，它自带了一套间距系统。

如果非要用自定义样式的话，记得Vuetify会给组件加上scoped样式，普通的class选择器优先级不够。你可以用deep选择器来突破这个限制，像这样：

::v-deep(.custom-padding) {

  padding: 24px !important;

}

不过说实话，建议还是走Vuetify的规范，用内置的spacing类名更省事。要是想全局调整的话，可以改Vuetify的主题配置，在vue初始化的时候设置默认的spacing值，插件可以这么配：

export default new Vuetify({

  theme: {

    options: {

      customProperties: true,

    },

  },

})

这样写完基本就能解决你的问题了。

2026-02-16 11:02