解决react样式组合时css module动态样式失效的问题

现象:

       <button

              disabled={invalid}

              className={ "btn btn-primary btn-lg" +  invalid ? styles.btnDisabled : ""    }

            >

              注册

            </button>

 

 上面采用字符串拼接的方式,组合class,但是css module的动态样式styles.btnDisabled是不能生效的。

解决办法: 使用classnames中间件,组合静态样式和动态样式

yarn add -D classnames

import classnames from "classnames";

 使用classnames的组合语法如下:

className={ classnames('静态样式内容 ', 动态样式表达式) }

注: 静态样式和动态样式表达式之间用逗号隔开。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bootstrap的导航菜单组件相关知识

目录 01-最基本的导航示例02-设置导航的对齐方式02-1-设置导航在水平方向上的对齐方式 02-2-设置导航在垂直方向上进行布局03-设计标签页导航04-带下拉菜单的标签页导航05-设计胶囊式导航05-1-基本的胶囊式导航05-2-带下拉菜单的胶囊式导航 06-让导航菜单项可以切换(激活导航菜…

LuatOS-SOC接口文档(air780E)-- iconv - iconv操作

iconv.open(tocode, fromcode)# 打开相应字符编码转换函数 参数 传入值类型 解释 string 释义&#xff1a;目标编码格式 取值&#xff1a;gb2312/ucs2/ucs2be/utf8 string 释义&#xff1a;源编码格式 取值&#xff1a;gb2312/ucs2/ucs2be/utf8 返回值 返回值类型 解…

发布npm包质量分测试

查询质量分接口 https://registry.npmjs.org/-/v1/search?textcanvas-plus v0.0.1 quality 0.2987 新建文件夹 canvas-plus 执行命令 npm init 生成package.json {"name": "3r/canvas-plus","version": "0.0.1","descript…

深入理解 Python 虚拟机:协程初探——不过是生成器而已

深入理解 Python 虚拟机&#xff1a;协程初探——不过是生成器而已 在 Python 3.4 Python 引入了一个非常有用的特性——协程&#xff0c;在后续的 Python 版本当中不断的进行优化和改进&#xff0c;引入了新的 await 和 async 语法。在本篇文章当中我们将详细介绍一下 Python…

NewStarCTF2023week2-Unserialize?

代码审计&#xff1a; 定义了一个eval类&#xff0c;该类下有一个私有变量cmd和公有成员函数destruct()&#xff0c;该函数在对象的所有引用都被删除或类被销毁时会自动调用&#xff1b; 调用该函数则会执行一个正则表达式进行正则匹配&#xff0c;过滤掉了一些常用命令和bas…

周记之学习总结

你在人群中看到的每一个耀眼的女孩&#xff0c;都是踩着刀尖过来的。你如履平地般地舒适坦然&#xff0c;当然不配拥有任何光芒&#xff1b; 10.11-10.12 思来想去还是不舍得&#xff0c;搞了一下这个jwt&#xff0c;看了很多视频和博客&#xff0c;一直没看懂&#xff0c;两…

pytorch 模型部署之Libtorch

Python端生成pt模型文件 net.load(model_path) net.eval() net.to("cuda")example_input torch.rand(1, 3, 240, 320).to("cuda") traced_model torch.jit.trace(net, example_input) traced_model.save("model.pt")output traced_model(exa…

没有前端如何测试后端跨域问题

一、问题 前段时间对项目中的跨域做了相关的处理&#xff0c;网上有很多跨域的解决方案。前端解决&#xff0c;后端解决&#xff0c;nginx代理解决。我采用的是在后端中使用Cors来解决跨域的问题。但是前端项目还没有搭建起来&#xff0c;并不知道Cors的解决方案是否会生效&am…

深度学习-AlexNet论文精读

论文相对于博文是第一手资料&#xff0c;并且如果研究的东西比较前沿是搜不到相关的博文。谷歌学术论文名&#xff1a;ImageNet Classification with Deep Convolutional Neural Networks。论文下载论文阅读 一篇论文读三遍&#xff0c;不一定需要读完。第一遍读题目&#xff0…

Potato靶机

信息搜集 设备发现 扫描端口 综合扫描 开放了80端口的HTTP服务和7120端口的SSH服务 目录扫描 扫描目录 看看这个info.php&#xff0c;发现只有php的版本信息&#xff0c;没有可以利用的注入点 SSH突破 hydra 爆破 考虑到 7120 端口是 ssh 服务&#xff0c;尝试利用 hydra …

vue3+vite项目中使用svgIcon

如何在vue2webpack项目中使用svgIcon&#xff1f;参考&#xff1a;手摸手&#xff0c;带你优雅的使用 icon - 掘金 这篇文章主要介绍如何在vue3项目中优雅的使用图标 1、通过 vite-plugin-svg-icons 插件封装SvgIcon组件 npm i vite-plugin-svg-icons -D 2、配置 vite.conf…

机器学习在工业机器人领域有哪些应用?

随着人工智能和机器学习的快速发展&#xff0c;工业机器人领域也迎来了新的机遇和挑战。本文综述了机器学习在工业机器人领域的应用&#xff0c;包括机器人视觉、运动控制、路径规划、故障诊断等方面。通过对相关研究和实际应用的分析&#xff0c;总结了机器学习在工业机器人领…

【C语言】结构体、位段、枚举、联合(共用体)

结构体 结构&#xff1a;一些值的集合&#xff0c;这些值称为成员变量。结构体的每个成员可以是不同类型的变量&#xff1b; 结构体声明&#xff1a;struct是结构体关键字&#xff0c;结构体声明不能省略struct&#xff1b; 匿名结构体&#xff1a;只能在声明结构体的时候声…

在pycharm中运行js文件,附加node.js下载步骤

文章目录 一、前言二、node.js安装和配置(如果之前就安装好了可以直接跳过)1、进入官网下载安装包2、在本地安装node.js3、环境配置4、验证是否安装成功5、修改下载位置(默认是在c盘&#xff0c;这个根据个人需求)6、设置默认模块包7、测试一下是否修改成功(要进入管理员模式的…

11 | JpaRepository 如何自定义

EntityManager 介绍 Java Persistence API 规定&#xff0c;操作数据库实体必须要通过 EntityManager 进行&#xff0c;而我们前面看到了所有的 Repository 在 JPA 里面的实现类是 SimpleJpaRepository&#xff0c;它在真正操作实体的时候都是调用 EntityManager 里面的方法。…

云上攻防-云原生篇K8s安全Config泄漏Etcd存储Dashboard鉴权Proxy暴露

文章目录 云原生-K8s安全-etcd未授权访问云原生-K8s安全-Dashboard未授权访问云原生-K8s安全-Configfile鉴权文件泄漏云原生-K8s安全-Kubectl Proxy不安全配置 云原生-K8s安全-etcd未授权访问 攻击2379端口&#xff1a;默认通过证书认证&#xff0c;主要存放节点的数据&#x…

升级包版本之后Reflections反射包在springboot jar环境下扫描不到class排查过程记录

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 哈喽&#xff01;大家好&#xff0c;我是「奇点」&#xff0c;江湖人称 singularity。刚工作几年&#xff0c;想和大家一同进步&#x1f91d;&#x1f91d; 一位上进心十足的【Java ToB端大厂…

LeetCode 1 两数之和

题目描述 链接&#xff1a;https://leetcode.cn/problems/two-sum/?envTypefeatured-list&envId2ckc81c?envTypefeatured-list&envId2ckc81c 难度&#xff1a;简单 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 targ…

Linux system函数返回值

1、语法 #include <stdlib.h>int system(const char *command); 2、函数说明 system()会调用fork()产生子进程&#xff0c;由子进程来调用/bin/sh -c command来执行参数command字符串所代表的命令&#xff0c;此命令执行完后随即返回原调用的进程。 command命令执行完成…

SQL RDBMS 概念

SQL RDBMS 概念 RDBMS是关系数据库管理系统(Relational Database Management System)的缩写。 RDBMS是SQL的基础&#xff0c;也是所有现代数据库系统(如MS SQL Server、IBMDB2、Oracle、MySQL和MicrosoftAccess)的基础。 关系数据库管理系统(Relational Database Management Sy…