react组件配置样式hover效果的实现

需求

• 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");
});