Lightning表格按钮边框移除：自定义CSS类添加后不生效求助

为啥自定义CSS类没生效？ #

LWC的样式是有作用域限制的，你写的.borderRemove类默认只能作用在当前组件的元素上，表格里的按钮属于表格组件内部的元素，所以你的样式穿不进去，自然没效果。

搞定方法 #

1. 用CSS穿透强制生效 #

在组件的CSS文件里，给自定义类加上::v-deep前缀，让样式能穿透到表格内部的按钮：

::v-deep .borderRemove {
    border: none !important;
    /* 嫌背景碍眼可以加上这个，让按钮更清爽 */
    background-color: transparent;
}

这样你的自定义样式就能作用到目标按钮上了。

2. 配合按钮属性优化 #

你的列配置代码是对的，还可以给按钮加个variant: 'base'属性，这个基础样式的按钮默认边框更淡，配合自定义样式效果更好：

{
    label: 'Name',
    fieldName: 'Name',
    type: 'button',
    initialWidth: 200,
    typeAttributes: {
        label: { fieldName: 'Name' },
        class: 'borderRemove',
        variant: 'base' // 可选，让按钮样式更贴合需求
    },
    sortable: true
}

3. 直接修改表格按钮默认样式 #

如果不想用自定义class，也可以直接定位表格按钮的默认类，用穿透样式修改（注意这个会改所有表格按钮）：

::v-deep .slds-table .slds-button {
    border: none;
    background-color: transparent;
}

内容的提问来源于stack exchange，提问作者Chirag Kansal