React中CSS样式处理多个!important优先级的情形

2023-07-03

React中组件样式通常用className或style来应用，使用第三方组件时，可能并不直接支持这两个属性。

自定义复杂组件样式时，会存在多个!important的情形，这里推荐一种终极解决方法。

借助useEffect和useRef，在组件初始化时，手动精准设置组件样式。

简单示例：

import React, { useState, useRef, useEffect } from 'react';

export default function Demo(props) {
	const handle = useRef();

	useEffect(() => {
		handle.current.setProperty('font-size', '10px', 'important');
	}, [])
	
    return (
    	<>
    		<div ref={handle}>
				Demo
    		</div>
		</>
    )
}

需要注意的是用JS操作style，通常有两种写法：

第一种： 驼峰式属性名，不支持!important

const ele = document.getElementById('xxxx');

ele.style.fontSize = '10px';

第二种：通用属性名，支持!important

const ele = document.getElementById('xxxx');

ele.style.setProperty('font-size', '10px', 'important');

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

分享推荐