Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式

本是古典何须时尚 2022-09-10 03:11 593阅读 0赞

产品需求：要求提示信息换行时单词不能分开

在这里插入图片描述

因为element-ui中this.$message 默认 word-break:break-all ，我需要改为word-wrap:break-word

具体步骤

在这里插入图片描述
在这个样式表中修改无效，所以发现在scoped的style中修改它的样式是无效的，因为ElementUI组件不可以给样式添加scoped。因此要想修改其样式就一定要去掉scoped，但是如果去掉scoped后，又不满足单组件的CSS样式，所以我们在写个style，附加在没有scoped的style中就可以实现了。
在这里插入图片描述
到这里就实现了

发表评论取消回复

表情：

评论列表（有 0 条评论，593人围观）

还没有评论，来说两句吧...

相关阅读

相关 checkbox样式美化修改复选框样式

> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMT

忘是亡心i/ 2023年02月17日 11:20/ 0 赞/ 144 阅读

相关 iview样式修改Pooptip气泡框

iview的修改在全局样式中修改App.vue 给PoopTip 加个class(.node\_poptip)区分全局，防止全部覆盖气泡框要修改两处 .no

我就是我/ 2022年12月19日 00:43/ 0 赞/ 224 阅读

相关输入框input 修改placeholder样式

::-webkit-input-placeholder { / WebKit, Blink, Edge / } :-moz-placeholder {

客官°小女子只卖身不卖艺/ 2022年12月18日 07:59/ 0 赞/ 254 阅读

相关 V-html修改内容样式

v-html中内容渲染到页面需要修改样式可以用正则表达式来修改。 GetSafeRemark(fireUnitId){ this.$http.get(

Bertha 。/ 2022年12月06日 15:53/ 0 赞/ 534 阅读

相关 React Antd 中如何修改覆盖默认样式及样式引用

如何覆盖antd的默认样式 step.1 通过浏览器调试面板，找到需要修改的样式class 名如下所式 `.ant-time-picker-input` ![在这

本是古典何须时尚/ 2022年09月15日 11:49/ 0 赞/ 361 阅读

相关 Vue——ElementUI 如何修改this.$message消息提示框样式及内容样式

产品需求：要求提示信息换行时单词不能分开 ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_te

本是古典何须时尚/ 2022年09月10日 03:11/ 0 赞/ 594 阅读

相关修改input输入框的样式

直接上代码 <style> .input{ -web-kit-appearance:none; -moz-appearance: n

Love The Way You Lie/ 2021年12月24日 15:39/ 0 赞/ 765 阅读

相关小程序下拉框自定义样式picker修改样式picker-view修改样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

冷不防/ 2021年11月26日 23:36/ 0 赞/ 2241 阅读

相关修改系统默认 alert 弹框样式

修改默认 alert 弹框，思路很简单，定义一个 alert(e) 函数，加载最开头即可。 css部分： <style> msg{

我就是我/ 2021年09月17日 09:52/ 0 赞/ 687 阅读

相关修改复选框样式

![在这里插入图片描述][20210203145839294.png] //默认 input[type="checkbox"] {

﹏ヽ暗。殇╰゛Y/ 2021年07月24日 19:40/ 0 赞/ 626 阅读