React通过行内样式style向独立css文件传入参数
2022-01-19
React中设置元素样式一般用className和style。
<div className="wrap" style={{ 'height': '100px' }}>
Hello World!
</div>
许多应用场景中,元素样式需要动态改变,如果将大量判定逻辑写在jsx文件中,显得十分臃肿,而且不方便与引入的独立css文件结合使用,尤其是一些复杂的伪元素样式管理。
这时候推荐使用CSS的var() 函数,通过行内样式style向独立css文件传入参数。
实例演示
动态修改div滚动条样式,传入宽度变量:–width。
// app.jsx
import React, { useState, useRef, useEffect } from 'react';
import styles from './app.less';
export default function App(props) {
const area = useRef();
const [scrollHeight, setScrollHeight] = useState(0);
const checkScrollbar = () => {
setTimeout(() => {
const el = area.current;
if (!el || !el.clientHeight || !el.scrollHeight) return;
return setScrollHeight(el.clientHeight < el.scrollHeight ? 4 : 0);
}, 1);
}
useEffect(() => {
checkScrollbar();
}, [])
return (
<>
<Tool />
<div ref={area} className={styles.area} style={{ '--width': `${scrollHeight}px` }}>
Hello World!
</div>
</>
)
}
// app.less
.area {
height: calc(100% - 26px);
overflow: scroll;
}
.area::-webkit-scrollbar {
width: var(--height);
height: 0;
}
参考
- React 动态控制伪元素样式(https://blog.csdn.net/cofecode/article/details/115372495)
- CSS var() 函数(https://www.w3school.com.cn/cssref/func_var.asp)
(版权归cpury.com所有,转载请注明出处。)