antd Modal弹窗设置滚动条、滚动条样式

 使用的less的global样式穿透,如果是VUE使用scss  ::v-deep等方式对第三方组件库样式穿透。需要注意的是样式作用域非全局的使用唯一类名嵌套。例如Modal弹窗,我在modal上设置了className='batchModal' ,在.batchModal进行穿透和修改,其样式只作用于该类名的弹窗。

效果图先奉上(略丑):

样式代码如下: 

.batchModal {
  width: 874px !important;
  :global(.ant-modal-content){
    :global(.anticon){
      color: #fff;
    }
    :global(.ant-modal-footer){
      padding: 10px 16px 24px 16px;
      text-align: center;
      background: transparent;
      border-top: none;
      border-radius: 0 0 8px 8px;
      :global(.ant-btn + .ant-btn:not(.ant-dropdown-trigger)){
        margin-bottom: 0;
        margin-left: 24px;
      }
    }
    :global(.ant-modal-header){
      background-color: #2d7cff;
      border-bottom: none;
      :global(.ant-modal-title){
        font-size: 20px;
        font-weight: 400;
        text-align: left;
        color: #fff;
        line-height: 24px;
      }
    }
    :global(.ant-modal-body) {
      height: 600px;
      overflow: auto;
      // 滚动条样式写在body类名上
      &::-webkit-scrollbar {
        width: 6px;
        height: 4px;
      }
      &::-webkit-scrollbar-thumb {
        background: rgba(149, 146, 146, 0.2);
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      }
      &::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 10;
        box-shadow: inset 0 0 5px rgba(205, 203, 203, 0.2);
      }
    }
  } 
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果需要修改 Antd 滚动条样式,可以通过以下几种方式实现: 1. 使用 CSS 样式覆盖原有样式 Antd 滚动条样式可以通过 CSS 样式覆盖,具体可以通过以下代码实现: ```css ::-webkit-scrollbar { width: 10px; height: 10px; background-color: #f5f5f5; } ::-webkit-scrollbar-thumb { background-color: #c1c1c1; border-radius: 5px; } .ant-table-body::-webkit-scrollbar-thumb { background-color: #1890ff; } ``` 2. 使用自定义主题配置 Antd 通过提供主题定制功能,可以方便地修改滚动条样式。具体可以通过以下代码实现: ```javascript // 在 less 文件中定义主题变量 @scrollbar-width: 10px; @scrollbar-color: #c1c1c1; @scrollbar-track-color: #f5f5f5; @scrollbar-thumb-hover-color: #1890ff; // 在 webpack 配置文件中引入主题文件 const { getThemeVariables } = require('antd/dist/theme'); const themeVariables = getThemeVariables({ dark: true }); const lessToJs = require('less-vars-to-js'); const fs = require('fs'); const path = require('path'); const themeVariablesContent = fs.readFileSync(path.join(__dirname, './theme.less'), 'utf8'); const themeVariablesJson = lessToJs(themeVariablesContent); module.exports = { // ... module: { // ... }, plugins: [ // ... ], resolve: { // ... }, // 在 antd 主题变量基础上添加自定义主题变量 lessLoader: { lessOptions: { modifyVars: { ...themeVariables, ...themeVariablesJson, }, javascriptEnabled: true, }, }, }; ``` 然后在需要修改滚动条的组件中,设置 `scrollbar={{}}` 属性,具体可以通过以下代码实现: ```javascript import { Table } from 'antd'; const dataSource = [ // ... ]; const columns = [ // ... ]; const App = () => { return ( <Table dataSource={dataSource} columns={columns} scrollbar={{ width: '@scrollbar-width', height: '@scrollbar-width', backgroundColor: '@scrollbar-track-color', thumbColor: '@scrollbar-color', thumbHoverColor: '@scrollbar-thumb-hover-color', }} /> ); }; export default App; ``` 3. 使用第三方插件 除了上述两种方式,还可以使用第三方插件来修改滚动条样式,如 `react-custom-scrollbars`。具体可以通过以下代码实现: ```javascript import { Table } from 'antd'; import { Scrollbars } from 'react-custom-scrollbars'; const dataSource = [ // ... ]; const columns = [ // ... ]; const App = () => { return ( <Scrollbars style={{ height: 200 }} renderThumbVertical={({ style, ...props }) => ( <div {...props} style={{ ...style, width: 10, borderRadius: 5, backgroundColor: '#c1c1c1', }} /> )} > <Table dataSource={dataSource} columns={columns} /> </Scrollbars> ); }; export default App; ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值