ant-mobile的Toast的样式修改（react）

最近使用了ant-mobile来作为项目的UI框架。

项目中，点击列表的时候回出现一个提示，这个提示是ant-mobile自带的toast，我们可以直接调用。

toast的提示很多的，我这里只是用的toast.info。

最开始的时候，是这样的。

根据项目的设计UI需要修改其样式，因为这个toast是动态添加，并且会马上消失的，所以页面中根本找不到这个元素。

绞尽脑汁后，突然想到，toast中设置了消失的延时。那我设置长一点，应该就可以在它消失前看到这个元素了。

试了一下，将时间设置为10秒。

找到了他的名字，叫am-toast-text，我试了给它设置两个属性。

但是,样式却没有成为我想要的背景透明。边框倒是加上了。

原来他已经有的属性，没有改变，没有的属性，是加上了的。要想改变其已有属性，得另想办法了。

突然想起CSS中有个叫important的，级别好像是最高。我试了一下。样式就变成了下面这样。

还真的是有用呢，开心~~~~~~~~~~~

emmmm，方法已经找到了，先记录一下，我要开始改变其样式了。有什么节外生枝的，完了再来补充~~~~~~~~~~~

转载于:https://www.cnblogs.com/ellenbaby/p/9596828.html

ant-mobile的Toast的样式修改（react）相关推荐

【Ant Design Pro 三】样式动态绑定 react样式绑定
第一步,创建样式文件,在页面目录下根据自己习惯创建一个less文件,用来写样式类第二部,引用该文件 import styles from './details.less'; //details.le ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
react鼠标移入移出样式修改
解决react鼠标移入移出样式修改的问题. 效果截图: 代码实现: js代码: <div className={styles.listStyle}><MenuonClick={thi ...
wxpython 按钮扁平化_jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍
这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企业应用, 但是要是移动互联网应用的话,就显得通用一些,没有更鲜明的互联网元素. 现在扁平化设 ...
Antd Pro V4 样式修改大全（有图有真相）
Antd Pro V4 样式修改大全一.左侧菜单的logo和标题 (1)logo修改 BasicLayout.jsx import logo from '../assets/example.jpg' ...
bind-html自动换行,vue element ui this.$alert 样式修改，长词自动换行、自定义htm
vue element ui this.$alert 样式修改,长词自动换行.自定义htm vue element ui this.$alert 样式修改,长词自动换行.自定义html标签无效果问题 ...
html input type=quot;filequot;,科技常识：关于type=quot;filequot;的input框样式修改小结...
今天小编跟大家讲解下有关关于type="file"的input框样式修改小结 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关关于type="file" ...
Word中新建样式/修改样式对话框中的各个选项意义
名称(N): 显示您在"样式"对话框中选择的样式的名称.您可以更改此样式,或者键入新名称来新建样式,长文档中,样式的名称要注意易于理解和记忆,如"篇样式",&q ...
滚动条全局样式修改与局部修改
全局的样式代码: ::-webkit-scrollbar {width: 10px;height: 10px;}/* 滚动条的滑块 */::-webkit-scrollbar-thumb {backg ...

ant-mobile的Toast的样式修改（react）

ant-mobile的Toast的样式修改（react）相关推荐

最新文章

热门文章