How to use useRef to change the style of a element?

In React, useRef is a Hook that allows you to directly access DOM elements within a component. This enables you to manipulate DOM elements, including modifying their styles.

Below are the steps to use useRef for changing an element's style:

1. First, create a reference (ref) using useRef().
2. Assign this reference to the ref attribute of the element you want to modify.
3. Access the DOM element directly through this reference and update its style properties.

Here is an example code snippet demonstrating how to use useRef to change an element's background color:

jsx
import React, { useRef } from 'react';

function App() {
  // Create a ref object
  const myElementRef = useRef(null);

  const changeStyle = () => {
    // Verify the ref is associated with a DOM element
    if (myElementRef.current) {
      // Update the DOM element's style directly
      myElementRef.current.style.backgroundColor = 'blue';
    }
  };

  return (
    <div>
      {/* Associate the ref with the element to modify its style */}
      <div ref={myElementRef} style={{ width: 100, height: 100, backgroundColor: 'red' }}>
        Click the button to change my color
      </div>
      <button onClick={changeStyle}>Change Color</button>
    </div>
  );
}

export default App;

In this example, we create a div element and use useRef to define a reference named myElementRef. By associating this reference with the div element, we can access the actual DOM element via myElementRef.current. When the user clicks the button, the changeStyle function triggers, updating the div's background color.

Note: Directly manipulating the DOM is generally discouraged, as it may cause React's virtual DOM to become out of sync with the actual DOM. In most cases, use React's state management to trigger re-renders for style updates. However, for specific scenarios like managing focus, text selection, or media playback, useRef is appropriate.