修改ant design组件自带样式 背景 Vue-CLI创建的项目 需求 把走马灯的面板指示点（如图1）改成真正的点（如图2） 解决方法 走马灯自带面板指示点类名dotsClass = "slick-dots"，考虑到项目中可能多处会用到走马灯，请自行更改类名（我的项目只有一处用到，故不想改） 在src/assets/style/（这个是我用来放全局样式文件目录）下新建一个.css文件（其它类型的stylesheet文件也可以用，但我没试过），再次强调，如同一组件须多次使用、且样式要求不同，请自行更改类名，样式文件也请分开创建，注意互相覆盖问题。 在需要用到此样式的<style></style>内引入该文件，如下 webstorm用户使用import可能会报错，请移步至Setting > Language & Frameworks > JavaScript > Webpack 将webpack configuration file路径切换至：当前项目绝对路径\node_modules\@vue\cli-service\webpack.config.js，报错消失。 Notice 根据我的实验，直接在组件使用的单页面模板内修改组件内部样式无用，加上/deep/、::v-deep都没用。 关于组件内部元素的类名，请自行在开发者工具中检查，然后再到样式文件修改（这是最麻烦的地方），建议在sandbox中对单个组件进行试验后，再到项目修改测试，因为sandbox对样式的响应比较快。 自己预设的其他全局样式对组件没用（至少我的是这样），如*{ box-sizing: border-box; }，需要在刚刚建的单独样式文件里重新申明。 更改antd 默认样式 更改ant design 默认样式 如果提供的api可以修改样式，则可以通过api直接修改。 如果提供的api达不到想要的效果，可以通过className的方式来修改样式。 例如： 我想修改司机这一行的高度 在控制台中找到对应的样式 将:global放在一个较大的父级容器中 注意：:global后不能有空格 修改后： 以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。