前言

今天在项目中遇到一个问题，在给antd的Table组件设置scroll属性之后，横向有滚动条出现，右边竖向出现滚动条的占位，但是只想实现横向滚动，因此就想把竖向的滚动轴占位去掉，如下图：

修改antd默认样式

首先想到的就是使用:global来处理，即：

:global{
    .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body{
        overflow-y: hidden !important;
    }
}

效果如下图：

此时竖向的滚动条的占位已去掉，但是这样一改会影响整个项目的Table组件的样式，但是我只想在当前页面修改此样式，所以就在Table组件外层套层div，然后设置一个className，然后只修改这个className下的样式，代码如下：

<div className="table">
    <Table 
        bordered
        rowKey="id"
        ...
    />
</div>

:global{
    .table{
        .ant-table-fixed-header > .ant-table-content > .ant-table-scroll > .ant-table-body{
            overflow-y: hidden !important;
        }
    }
}

至此，问题就解决了。