为 antd 表格滚动条应用内联 css

发布于 2025-01-16 08:53:31 字数 221 浏览 2 评论 0原文

如何为滚动条应用内联CSS？我需要更改 antd Table 滚动的默认宽度和颜色。

 <Table style={{ width: '100%' }} scroll={{ y: 80 }}
          pagination={false}
          columns={columns}
          dataSource={data} />

原文

How to apply inline css for the scroll bar? I need to change default width and color of scroll of the antd Table.

 <Table style={{ width: '100%' }} scroll={{ y: 80 }}
          pagination={false}
          columns={columns}
          dataSource={data} />

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

与之呼应 2025-01-23 08:53:31

要将样式应用于 antd 表滚动条或任何 CSS，我们可以通过数据所在位置的选择器来实现

ant-表内容

可以指定类并使用 webkit-scrollbar 进行设计

.ant-table-content::-webkit-scrollbar {
    width: 8px;
    /* width of the entire scrollbar */
}

.ant-table-content::-webkit-scrollbar-track {
    background: orange;
    /* color of the tracking area */
}

.ant-table-content::-webkit-scrollbar-thumb {
    background-color: blue;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* roundness of the scroll thumb */
    border: 3px solid orange;
    /* creates padding around scroll thumb */
}

To Apply styles to antd Table scroll bar or any CSS we can achieve it by selector of where the data is present

ant-table-content

You can specify the class and use webkit-scrollbar for desiging

.ant-table-content::-webkit-scrollbar {
    width: 8px;
    /* width of the entire scrollbar */
}

.ant-table-content::-webkit-scrollbar-track {
    background: orange;
    /* color of the tracking area */
}

.ant-table-content::-webkit-scrollbar-thumb {
    background-color: blue;
    /* color of the scroll thumb */
    border-radius: 20px;
    /* roundness of the scroll thumb */
    border: 3px solid orange;
    /* creates padding around scroll thumb */
}

回复收藏 0 原文

孤独难免 2025-01-23 08:53:31

我从上面的答案中得到了如何做到这一点的想法，但我的解决方案是不同的。我使用 devTools 找到了那个伪属性，但我的在 .ant-table 下，而不是 .ant-table-content

也许我们使用的是不同版本的 antd？

这适用于 v3.15.1：

.ant-table::-webkit-scrollbar-thumb {
    background-color: blue !important
}

.ant-table::-webkit-scrollbar {
    height: 8px;
}

I got the idea of how to do it from the answer above but my solution was different. I used devTools to find that pseudo property but mine was under .ant-table not .ant-table-content

Perhaps we are on different versions of antd?

This works for v3.15.1:

.ant-table::-webkit-scrollbar-thumb {
    background-color: blue !important
}

.ant-table::-webkit-scrollbar {
    height: 8px;
}

回复收藏 0 原文

腻橙味 2025-01-23 08:53:31

这在 v5.7.0 上对我有用：

<div>
<style>
      {`
      div::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      div::-webkit-scrollbar-thumb {
        background: transparent;
      }
      div:hover::-webkit-scrollbar-thumb {
        background: #888;
      }
      `}
    </style>
<Table /> // ant table component
</div>

this is worked for me on v5.7.0 :

<div>
<style>
      {`
      div::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      div::-webkit-scrollbar-thumb {
        background: transparent;
      }
      div:hover::-webkit-scrollbar-thumb {
        background: #888;
      }
      `}
    </style>
<Table /> // ant table component
</div>

回复收藏 0 原文

~没有更多了~