最详细修改antd组件select的滚动条样式

最新推荐文章于 2025-04-03 12:32:28 发布

实习小子

最新推荐文章于 2025-04-03 12:32:28 发布

阅读量1.2k

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/m0_66809099/article/details/132343225

版权

自带的select的滚动条样式又黑又粗,丑陋.接下来我们改造他

初始代码

.contain {
  .btn {
    margin-top: 60px;
    margin-left: 60px;
    :global {
      .ant-btn {
        width: 200px;
        height: 100px;
        border-radius: 6px;
      }
    }
  }
}

 <div className={styles.contain}>
      <Select
        mode="tags"
        placeholder="Please select"
        defaultValue={['a10']}
        options={options}
        style={{ width: '100px' }}
      />
    </div>

首先用到popupClassName(4.23.0以上),以下的就别凑热闹了,用dropdownClassName

   <div className={styles.contain}>
      <Select
        mode="tags"
        placeholder="Please select"
        defaultValue={['a10']}
        options={options}
        style={{ width: '100px' }}
        popupClassName={styles.select}
      />
    </div>

css里面(注意作用域哈,得放在外层)