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