This is originally answered by Daniel above. I just want to share my answer as I refactor his answer to work with hooks.
- Define ref
const ref = useRef(null);
- Add ref to your desired node (ex. div, table)
<div ref={ref}></div>
- Add this code
ref.current.style.setProperty(<property>, <value>, "important")
inside useLayoutEffect
Please see the sample codes below
import React, { useRef, useLayoutEffect } from "react";
const SampleComponent = () => {
const ref = useRef(null);
useLayoutEffect(() => {
ref.current.style.setProperty("border-top", "0px", "important");
}, []);
return (
<div ref={ref}>
{/* additional codes here */}
</div>
)
}
Note:
- property is in CSS format (ex. "border-top" )