Inline CSS styles in React: how to implement a:hover?

In React, inline styles don’t natively support pseudo-classes such as :hover. Nevertheless, a similar outcome can be achieved by dynamically updating inline styles through React state and events. If you prefer a more CSS-focused approach with separate styles, the styled-components library offers an alternative solution.

Consider the following example using styled-components:

// Ensure styled-components is installed before usage:
// npm install styled-components
import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  padding: 10px;
  border: 1px solid #ccc;

  &:hover {
    background: #e0e0e0;
    // Add other hover styles as needed
  }
`;

const MyComponent = () => {
  return (
    <StyledDiv>
      {/* Your component content */}
      <p>This is my component</p>
    </StyledDiv>
  );
};
export default MyComponent;