React样式修改背景失效

最新推荐文章于 2024-01-04 18:04:23 发布
最新推荐文章于 2024-01-04 18:04:23 发布
阅读量1.4k 收藏
点赞数
分类专栏： web前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/from_the_star/article/details/109159945
版权
在React中，尝试通过改变style对象使按钮点击后变为渐变透明，但发现背景色并未更新。问题源于React对对象引用的比较，仅在对象改变时才重新渲染。解决方案包括使用深拷贝更新style对象，以及正确修改background属性以触发浏览器重绘。
摘要由CSDN通过智能技术生成

背景介绍

在这里插入图片描述
点击后，将不透明的按钮修改为渐进透明的按钮。代码如下：
点击前：

let style = this.props.style;
style["background"] = "rgba(250,103,37,1)";
//...
return (
<div style
最低0.47元/天 解锁文章
from_the_star
关注
专栏目录
React+Vis.js（02）：vis.js设置节点样式
WwLK123的博客
08-18 375
对vis.js的节点颜色、节点字体颜色、节点边框颜色、关系的颜色、粗细进行自定义。
Taro React组件开发 —— RuiVerifySlider 行为验证码之滑动拼图
最新发布
止于至善
05-27 485
修改后发现并没有那么麻烦，所以不要自己设置心理障碍，遇到需求要有研究的欲望；多研究大佬的框架代码，学习大佬的开发习惯，我发现随着时间越来越开发的没有欲望，在混日子一样；不断的激发自己的兴趣，学习开发更多的东西。
react native 中设置Image/ImageBackground圆角无效的解决方法
weixin_44682587的博客
03-04 1730
通常我们会设置style： borderRadius： 在安卓环境下，发现并没有生效，设置属性即可解决 imageStyle={undefined{ borderRadius:20 }} 完整示例： <Image style={{width:40,height:40,borderRadius:20}} imageStyle={{borderRadius:20}} /> <ImageBackground style={{width:40,height:40,borderRadius:
react项目使用require方法引入图片做背景图片不生效
xJ_fang的博客
12-02 984
问题： 使用require引入图片后未生效 代码如下 原因：require返回一个ES模块而不是字符串。这是因为在file-loader中，esModule选项是默认启用的。 解决方法：在require（）方法后面加 .default const image = require("../../public/login/" + dateDate + ".jpg").default; ...
React元素设置背景图片,打包后,背景图不显示了,小bug修复日记
Afterwards_的专栏
09-15 1462
一个背景图元素的css是这样写的:(连接只是示意,真实图片地址是有效存在的,不是图片路径问题) .back { background: url('https:www.xxx.com/xxx.jpg') no-repeat center center fixed; opacity: 18%; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } y
在react项目中引入本地图片不生效问题
weixin_58350627的博客
05-17 1562
在学习react项目的时候遇到图片不生效的问题。 使用require导入图像。需要加一个default <img src={require('./images/headers/xxx.png').default} alt="" /> 使用import导入(推荐) import logoImg from "./images/logo/logo.png" <img src={logoImg} alt=""/> ...
chrome extension 插件启动背景页无效问题
xo19882011的专栏
06-08 648
chrome extension 插件启动页面背景页面无效
react+AntDesign 之 pc端零到一
Jasmin博客
01-04 1573
react pc端项目案例
React Navigation 5.x详解
xiangzhihong8的专栏
12-01 947
React Navigation简介 在多页面应用程序中，页面的跳转是通过路由或导航器来实现的。在RN应用开发过程中，早期的路由可以直接使用官方提供的Navigator组件，不过从0.44版本开始，Navigator被官方从react native的核心组件库中剥离出来，放到react-native-deprecated-custom-components的模块中，并且Navigator组件也不再被官方推荐使用。此时，我们可以选择由React Native社区开源的一款路由导航库React Navigati
关于使用脚手架搭建react项目引入antd-mobile报错或修改主题色不失效的解决方法
D1sappearRy的博客
11-15 1499
1.引入antd-mobile在运行时失败 提示injectBabelPlugin函数在依赖包react-app-rewired 2.0之后的版本已经不再被支持，新版本支持的是依赖包customize-cra，config-overrides具体配置可查阅antd-mobile官方文档，也可以参照下方。如果仅仅是想实现按需打包，应用新版本的处理方法即可。 (1)安装各种依赖包 npm instal...
React 通过style来设置背景图片。
技术分享
12-17 1万+
React中，给元素设置样式主要有两种， 一，引入CSS文件 这种不用多说，通过 import import '../views/css/bases.css'; 这种方式适合，样式比较复杂，多的情况。 二，设置元素的 style <main type="lock" style={{ color: 'rgba(0,0,0,.25)' }}> </main&gt...
react 动态设置 backgroundImage base64图片不显示bug记录
王为仁的博客
09-20 3596
react 动态设置 backgroundImage base64图片不显示bug记录 问题：图片格式为base64 如 data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ...9oADAMBAAIRAxEAPwD/AD/6AP/Z 解决方案 先把base64里面的空格转义 img = img.replace(/\s/g, encodeURIComponent('...
style标签里面图片没有渲染出来问题
风烟
05-18 346
<div class="left" :style="{'background-image': `url(${logoUrl})`}"></div> 这样写代码的时候发现这个logoUrl死活就是渲染不出来， 排查问题思路 检查云端返回数据接口是否有这个字段，发现是有的 然后替换了一下别的图片URL是可以的，结论是这个URL有问题 经仔细查看，URL中有空格，导致渲染不出来，但是直接访问这个URL，浏览器会进行转译在这个URL所以才可以显示 解决方案 图片URL中不能有空格等特殊
React中使用CSS的7种方式
web前端开发
07-17 3881
来源 |http://www.fly63.com/article/detial/19611、在组件中直接使用style不需要组件从外部约会css文件，直接在组件中书写。import r...
React 基础（二）
fwk19840301的博客
05-02 183
一、ReactDOM.render()React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。以下实例中创建了 LikeButton 组件，getInitialState 方法用于定义初始状态，也就是一个对...
React应用react-color
天生欧皇张狗蛋
08-09 5046
一、 安装与引入 安装： npm install react-color --save 引入： import React from 'react' import { SketchPicker } from 'react-color' class Component extends React.Component { render() { return <SketchPicker />
基于react的组件库主题设计方案
web前端开发
09-22 683
作者 |余佩纯基于react设计与开发的组件库主题方案，以 Hippy React 主题方案设计为例需求背景单一的视觉不再满足用户体验需求，为提高用户体验，提高应用体验口碑，同时提高开...
关于使用元素 background-image 时遇到图片显示无效的原因及解决办法
热门推荐
weixin_40518162的博客
10-08 3万+
今天写java时遇到一个问题，给网页body编写css样式时background-image显示无效。上网查了才知道是路径有问题。 开始搞不懂为什么img标签就可以。现在记录下来方法方便以后忘记后查阅。 1.ccs样式background-image url() 失效原因。 我想在index.jsp中用background-image 引入upload下的mapleL
关于给ul加了背景颜色background-color 然后背景颜色不生效的问题。原因：li没有清除浮动
weixin_44746504的博客
04-24 3430
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作.
react native 修改状态栏背景颜色失效
07-13
你可以尝试使用`react-native-navigation-bar-color`这个库来修改React Native的状态栏背景颜色。下面是一个示例代码： 首先，安装这个库： ``` npm install react-native-navigation-bar-color ``` 然后在你的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值