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_logo

参考

  • React 动态控制伪元素样式（https://blog.csdn.net/cofecode/article/details/115372495）
  • CSS var() 函数（https://www.w3school.com.cn/cssref/func_var.asp）

（版权归cpury.com所有，转载请注明出处。）

WEB开发