全局修改element-ui样式
时间: 2023-07-29 19:11:11 浏览: 114
ElementUI 修改默认样式的几种办法(小结)
全局修改Element UI样式有多种方式可以实现。第一种方式是通过引入一个全局的CSS文件来修改样式,这种方式适合对整体样式进行修改,比如整体配色的修改。你可以创建一个名为global.css的文件,并在main.js中引入该文件,如下所示:
import "./assets/style/global.css";
在global.css文件中,你可以写入需要修改的样式,这样无论在哪个Vue组件中都会覆盖Element UI默认的样式。\[1\]\[2\]
另一种方式是通过在Vue组件中使用/deep/选择器来修改默认样式。这种方式可以很方便地在Vue组件中修改默认样式,而且不会与其他页面产生冲突。你可以在需要修改样式的Vue组件中使用/deep/选择器来选择需要修改的元素,并添加自定义的样式。\[1\]
需要注意的是,不推荐直接修改Element UI组件自带的样式,因为这样可能会导致一些意想不到的问题。如果需要修改Element UI组件的样式,建议使用以上提到的全局修改或在页面中覆盖的方式。\[3\]
#### 引用[.reference_title]
- *1* [修改Element-UI样式的几种方式](https://blog.csdn.net/qq_56989560/article/details/124145614)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [修改element-ui自带的样式](https://blog.csdn.net/baidu_35152382/article/details/123717725)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文