React-动态修改样式和添加类名

最新推荐文章于 2022-01-20 15:12:22 发布
最新推荐文章于 2022-01-20 15:12:22 发布
阅读量4.6k 收藏 1
点赞数
分类专栏： React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wa2661391317/article/details/104670143
版权

要求：点击<button>展示内容和隐藏内容有不同的背景颜色；
首先在默认的时候即没有展示的时候拥有一个样式：
在这里插入图片描述
下来展示内容的时候更改button的样式
在这里插入图片描述
接下来动态地添加类名（原因：不会将所有样式写在行间，因为行间样式作用范围比较小）：
希望1在这里插入图片描述
在这里插入图片描述
这个类名没有在上面创建一个：
在这里插入图片描述
接下来red类，bold类在App.css当中定义
在这里插入图片描述
在这里插入图片描述
在某种条件下发生变化：如果展示的组件小于等于2个发生一些变化；小于等于1个又发生一些变化，小于3个什么都没有将其绑定一个类名
在这里插入图片描述

Wanjun1772
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-native-modal-datetime-picker：适用于Android和iOS的React-Native datetime-picker
01-30
声明式跨平台React性日期和时间选择器。 该库公开了一个跨平台的界面，用于显示模式内部的本机日期选择器和时间选择器，从而提供统一的用户和开发人员体验。 在后台，该库使用 。 设置（适用于非EXPO项目） 如果...
前端踩坑(七)--------------------------react 动态操作className
小李科技
06-25 7794
前端踩坑(八)--------------------------react 动态操作className 文章目录前端踩坑(八)--------------------------react 动态操作className问题描述：如何动态修改一个元素的CSS样式呢？一 , react 动态操作className二 , 设置多个className三 这是您如何使用react定义和使用内联样式的方法 问...
使用 classnames 动态控制 React 组件 className
zwkkkk1的博客
07-27 8157
标题可能有些乱，前一个 classnames 是 React 官方推荐的一个用来控制给组件添加 CSS 类的一个包。 首先给一个 Demo，我用不同的两种方法来写一写，看看区别。 方法1 render() { let className = "demo-wrapper" if(this.state.num &gt; 3) className += ' bg...
react里做一个修改效果_React动态修改className的值
weixin_39538607的博客
12-18 426
应用场景：在网页初始化时，第一列表有蓝色底层；当点击随机一个列表，该列表变成蓝色底层，并去掉之前有蓝底的列表。效果图如下所示：问题：在初始化时，为一个列表设置蓝底。在点击一个列表时，移除之前列表蓝底，并着色蓝底。解决：:hover，:active等伪类无法满足需求。通过操作ClassName的值，来控制列表的样式；设置一个变量pre，用于保存上一个蓝底的列表的id值(初始化为第一个)。本文内容如下...
react设置多个动态className
bangbDIV的博客
07-03 4722
className = {`${styles.one} ${styles.two}`} // {}内是运算的部分
React中动态切换类名
酒馆不打烊
02-29 1326
通过安装 classnames来管理类别 npm install classnames --save import classNames from 'classnames'; // high-speed-track 固定类名 // 通过highSpeed是否存在来动态切换类名 <div className={classnames('high-speed-track',{ 'item-...
react-动态声明类名和动态设置内联样式
北京欢迎您
06-13 1153
需求 1.有一列导航条，我们需要根据当前点击的导航来设置样式。 2。表格中有价格一列，价格为空时显示为-，不为空时显示价格， 但是价格是红色，如下 当金额小记为空时，显示的时黑色的'-'，有价格时应当显示红色， 实现 1.动态设置类名： 可以通过es的模版字符串实现动态设置类名 handle = (index) => { this.setState({ c...
react中动态添加类名className(css modules)
jojo1001的博客
11-09 4735
react中动态添加类名className(css modules) 添加多个类名可以使用： // 第1种 直接加上一个空格的字符串 className={style.name0ne + ' ' + style.nameTwo} // 第2种 数组用逗号隔开，然后用join(' ')替换成空格 className={[style.name0ne, style.nameTwo].join(' ')} // 第3种 直接使用模板字符串 className={`${style.name0ne} ${style
React 动态属性Style和动态类名className
Youyzq的博客
01-20 3428
React 动态属性Style和动态类名className 怎么操作单个动态属性和多个动态属性 Style 怎么操作单个动态类名和多个动态类名 className
react模块文件使用全局class，并且可以修改全局的class属性而且不影响全局样式
baidu_38027860的博客
02-12 5551
简单描述业务场景： 项目是基于create-react-app搭建的，后续添加的css_modules及less等相关配置。 在写一些通用的组件的时候，我们往往需要单独提取一个全局的样式文件，用于存放所有通用的样式，模块内部则自己用自己的样式文件，以达到模块化开发的目的。 但是有些时候我们却需要在某个模板文件中修改全局的样式，例如我全局做好了媒体查询配置，但是偏偏有一个页面的布局稍稍有些不同...
ReactJs 样式类的使用
starwmx520的博客
10-16 1334
渲染标签上className={} 来设置样式 类名   直接class="XX" 这样是不行的，只能用className值 为js变量才行。 如有时样式 类引用会动态改变，需要用React.addons.classSet() 来创建对象 参数可以是多个字符串,或对象{clasname:this.XX} 动画修改组件属性来实现是否引用类名 以下是例子： /*className用法
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案Route不匹配时，组件将被卸载阅读源代码之后Route ，我们发现使用...
react-native-image-to-pdf:react-native插件可将图像转换为PDF
05-26
入门$ npm install react-native-image-to-pdf --save 或者$ yarn add react-native-image-to-pdf 大多是自动安装$ react-native link react-native-image-to-pdf 手动安装的iOS 在XCode的项目导航器中，右键单击“ ...
react-native-push-notification：React本机本地和远程通知
02-02
React本机推送通知 React适用于iOS和Android的本机本地和远程通知 :party_popper: 版本7.x上线了！ :party_popper: 在CHANGELOG中查看更改和迁移：支持项目维护该项目需要时间。 为了分配时间，您可以给我买一杯咖啡...
react-activation:真实的对于React
04-27
在.babelrc添加react-activation/babel插件 该插件在编译期间向每个JSX元素添加_nk属性，以帮助react-activation运行时通过基于react-node-key呈现位置生成唯一标识符。 { "plugins" : [ "react-activation/babel" ]...
react 的className动态修改
weixin_30835933的博客
06-05 422
https://blog.csdn.net/suwyer/article/details/81481507（copy） <div style={{display: (index===this.state.currentIndex) ? "block" : "none"}}>此标签是否隐藏</div> <div style={{display: (ind...
React组件属性类型（propTypes）校验
yong_bu_ting_zhi的专栏
09-24 1252
Prop 验证 随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别： React.createCla...
react 实现点击切换class（详细）
热门推荐
天下大师傅
02-08 1万+
点击切换样式， 通过for循环将索引(index)暂存至data-index中， 再通过onclick点击事件 e.target.parentNode.parentNode.getAttribute(‘data-index’); 来获取当前点击的索引值，最后将索引值存到state中。 页面三目运算通过比对state中暂存的索引值和当前dom元素的索引值的改变来决定是否显示class-st...
react动态渲染class类名（条件渲染）
Y丶小琪
11-27 1万+
  前提：有时候在开发过程中需要动态渲染类名，比如高亮显示，active状态等。 下面是react写法，记录一下： &lt;div className={counts&gt;0?"logo highlight":"logo"} &gt; &lt;Icon className={counts&gt;0?"icon-shopping-cart highlight":"icon-.
react-modal 修改模态框 模态框之外浅白色遮罩样式
最新发布
06-09
要修改 `react-modal` 模态框之外的浅白色遮罩样式，需要对 `body` 元素设置样式。 在默认情况下，`react-modal` 会在模态框打开时给 `body` 元素添加一个类名为 `ReactModal__Body--open` 的样式类。我们可以通过这个类名来选择 `body` 元素，并为其添加一个浅白色的遮罩层。 例如，你可以在 CSS 中添加以下样式： ```css .ReactModal__Body--open::after { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); z-index: 99; } ``` 在上面的样式中，我们使用 `::after` 伪元素来为 `body` 元素添加遮罩层。`position: fixed` 用于将遮罩层固定在页面上，`top`、`left`、`width` 和 `height` 用于设置遮罩层的位置和大小。 `background-color` 属性用于设置遮罩层的颜色，这里我们将其设置为浅白色，透明度为 50%。`z-index` 属性用于设置遮罩层的层级，确保它位于模态框下方。 然后，将上述 CSS 样式添加到你的项目中，当 `react-modal` 的模态框打开时，就会自动添加浅白色的遮罩层。 注意：如果在你的样式表中使用了 `!important` 关键字，可能会导致上述样式不生效。因此，建议避免在样式表中使用 `!important`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值