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