需求

  • react 自定义一个组件,组件内部样式可以灵活配置

问题

  • 一般样式都可以通过属性传入,比如:颜色,字号等,但是对于一些有hover效果的地方,属性传入后,按照平时css的使用方式不太容易实现

解决办法

  • 用js的方法,在body里创建一个style标签,将hover样式写入
  • 注意,每次创建完成后,在页面销毁时要删掉创建的style,否则每一次加载此组件时,都会创建一次style,造成样式冗余

代码

// 定义创建style并插入css的方法
function setInlineStyle(css: string, id="inline-style") {
// 如果相同的样式已存在,则不创建
if (!document.getElementById(id)) {
let style:any = document.createElement('style');
style.setAttribute("id", id)
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
document.getElementsByTagName('head')[0].appendChild(style);
}
}
// 定义删除style的方法
function removeInlineStyle( id="inline-style") {
let element = document.getElementById(id);
if (element) {
element.remove();
}
}
// 组件中使用方式(typescript+hooks)
const css = `.specific-jobCard-default-btn{border-color:${props.btnColor};color:${props.btnColor}} .specific-jobCard-default-btn:hover{background-color:${props.btnColor}}`;
useEffect(()=>{
setInlineStyle(css, "specific-jobCard");
return () => removeInlineStyle("specific-jobCard");
});

react组件配置样式hover效果的实现的更多相关文章

  1. css 给div 添加滚动条样式hover 效果

             css .nui-scroll { margin-left: 100px; border: 1px solid #000; width: 200px; height: 100px; ...

  2. React组件(组件属性this.state和this.props,css样式修饰组件)

    目录: 1.创建组件的第一种方式 function2.将组件抽离为单独的jsx文件3.省略.jsx后缀, 配置webpack设置根目录4.创建组件的第二种方式--使用class关键字创建组件5.组件私 ...

  3. Js更改样式导致hover效果消失

    [问题来源] 今天做单次倒计时,利用JS更改了button样式之后,再次点击时,发现hover效果消失. 原因: CSS的优先级问题导致 [解决方法] 利用!important提高hover的优先级 ...

  4. 【react 样式】给react组件指定style

    1.使用行内样式(优先级高) 自定义的react组件是没有style属性的,如果要给想给自定义react组件指定style,我的方法是用一个<div>包裹自定义组件,然后给div指定sty ...

  5. 初学React:组件的样式

    React中组件的样式有三种: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  6. 设计 react 组件

    重新设计 React 组件库 诚身 7 个月前   在 react + redux 已经成为大部分前端项目底层架构的今天, 让我们再次回到软件工程界一个永恒问题的探讨上来, 那就是如何提升一个开发团队 ...

  7. 如何快速构建React组件库

    前言 俗话说:"麻雀虽小,五脏俱全",搭建一个组件库,知之非难,行之不易,涉及到的技术方方面面,犹如海面风平浪静,实则暗礁险滩,处处惊险- 目前团队内已经有较为成熟的 Vue 技术 ...

  8. React组件复用的方式

    React组件复用的方式 现前端的工程化越发重要,虽然使用Ctrl+C与Ctrl+V同样能够完成需求,但是一旦面临修改那就是一项庞大的任务,于是减少代码的拷贝,增加封装复用能力,实现可维护.可复用的代 ...

  9. webpack入门+react环境配置

    小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...

随机推荐

  1. 24:WEB漏洞-文件上传之WAF绕过及安全修复

    本课重点 案例1:上传数据包参数对应修改测试 案例2:safedog+云服务器+uploadlabs测试 案例3:safedog+云服务器+uploadlabs_fuzz测试 案例4:文件上传安全修复 ...

  2. 进击的 Ansible(二):如何快速搞定生产环境 Ansible 项目布局?

    Tips:与前文 <进击的 Ansible(一):Ansible 快速入门> 一样,本文使用的 Ansible 版本 2.5.4,项目演示环境 MacOS.由于 Ansible 项目开发活 ...

  3. [ARC101C] Ribbons on Tree

    神仙的容斥题与神仙的树形DP题. 首先搞一个指数级的做法:求总的.能够覆盖每一条边的方案数,通过容斥可以得到\(\text{ans}=\sum\limits_E{(-1)^{|E|}F(E)}\).其 ...

  4. 记一次VS2010和VS2015自定义颜色的过程

    首先,是遇到的问题: 一天,使用VS2010看新项目代码时候,发现选中某个变量后,其它位置高亮显示的变量颜色太淡,不利于阅读代码,如下图.所以想修改这个颜色. 后来网上找了一遍,可以这样设置:工具-- ...

  5. Environment Modules 简明教程

    Environment Modules 简明教程 1. Modules 简介 在 Linux 超算平台上,通常会安装有不同版本的多种编译器和其他软件等,如常用的编译器有 intel 和 gnu,常用的 ...

  6. GWAS数据分析常见的202个问题?

    生信其实很简单,就是用别人的工具调参就行了.生信也很折腾,哪一步都可能遇到问题,随时让你疯掉(老辩证法了~).但是,你遇到的问题大部分人也都经历过.这时,检索技能就显得很重要了.平时Biostar和S ...

  7. 一劳永逸,使用 PicGo + GitHub 搭建个人图床工具

    原文链接: 一劳永逸,使用 PicGo + GitHub 搭建个人图床工具 经常写博客的同学都知道,有一个稳定又好用的图床是多么重要.我之前用过七牛云 + Mpic 和微博图床,但总感觉配置起来比较麻 ...

  8. Flink(五) 【消费kafka】

    目录 0.目的 1.本地测试 2.线上测试 提交作业 0.目的 测试flink消费kafka的几种消费策略 kafkaSource.setStartFromEarliest() //从起始位置 kaf ...

  9. HTML5 之 FileReader 的使用 (二) (网页上图片拖拽并且预显示可在这里学到) [转载]

    转载至 : http://www.360doc.com/content/14/0214/18/1457948_352511645.shtml FileReader 资料(英文): https://de ...

  10. redis安装与简单实用

    1.在Linux上redis的安装时十分简单的: 第一步:wget http://download.redis.io/releases/redis-2.8.12.tar.gz 解压: tar zxvf ...