小天才电话手表网站,网站建设优化课程,网站开发费 会计科目,网站建设的指导思想应用场景
已知第三方组件提供了少许的属性用于程序控制部分样式#xff0c;现在要求能控制所有细节。
实现方式
核心思路#xff1a;使用css变量
这里以antd组件库的Tabs控件为例#xff0c;控制Tabs被选中的页签字体样式。
定义css class#xff0c;这里用的sass
.t…应用场景
已知第三方组件提供了少许的属性用于程序控制部分样式现在要求能控制所有细节。
实现方式
核心思路使用css变量
这里以antd组件库的Tabs控件为例控制Tabs被选中的页签字体样式。
定义css class这里用的sass
.tabs{--active-fontfamily: inherit;--active-fontsize : inherit;--active-fontweight: inherit;--active-fontcolor : inherit;--active-fontstyle : inherit;//事先通过F12工具找到控件使用的class.ant-tabs-tab.ant-tabs-tab-active {.ant-tabs-tab-btn {font-family: var(--active-fontfamily);font-size : var(--active-fontsize);font-weight: var(--active-fontweight);font-style : var(--active-fontstyle);color : var(--active-fontcolor);}}
}组件逻辑
Tabs rootClassNametabs items{[{key:1,label:tab1,children:tab1pane},{key:2,label:tab2,children:tab2pane},
]}/const [conf,setConf]useState({active_fontfamily:微软雅黑,active_fontsize:14,active_fontweight:500,active_fontstyle:italic,active_fontcolor:#66ffcc
})
useEffect((){//由于ts类型限制如果直接写在style里会校验不过因此主动取dom对象赋值const tabs document.querySelector(.tabs) as HTMLDivElementif(tabs){tabs.style.setProperty(--active-fontfamily, conf.active_fontfamily)tabs.style.setProperty(--active-fontsize, conf.active_fontsize)tabs.style.setProperty(--active-fontweight, conf.active_fontweight)tabs.style.setProperty(--active-fontcolor, conf.active_fontcolor)tabs.style.setProperty(--active-fontstyle, conf.active_fontstyle)}
},[conf])
