Hi developer! In React, inline styles don’t natively support pseudo-classes like hover. However, we can achieve this functionality by either installing a third-party library or dynamically updating inline styles through React state and events to achieve a similar outcome.

1. Using the Styled Components library

To utilize styled components, you must first install them within your project. This can be achieved by executing the following command in your terminal:

// For npm
npm i --save styled-components --force

// For yarn
yarn add styled-components

Once installed, you can import styled from styled components and use it to create styled components.

Here's an example demonstrating how to use styled components to define a styled button component:

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: blue;
  padding: 10px;
  color: white;
  transition: 0.3s;
  &:hover {
  background-color: red;
  }
`;

const App = () => {
    return (
        <StyledDiv>
            Hover over me!
        </StyledDiv>
    );
}

export default App;

In the example code above, we have used the Styled Components library, which allows us to style React components by writing CSS directly in JavaScript. This defines a StyledDiv component with a blue background color and white text. When we hover over the container, the background color turns red.

2. Using the Radium library

To start using Radium in your project, you'll first need to install it. Just run this command:

// For npm
npm i --save radium --force

// For yarn
yarn add radium 

Once installed, you can import radium into your components and wrap them with the radium higher-order component (HOC) to enable radium's capabilities.

 

Here's an example demonstrating how to use Radium to create a button component with hover styles:

 

import React from 'react';
import Radium from 'radium';

// Create a button component
class Button extends React.Component {
    render() {
        const styles = {
            base: {
                backgroundColor: 'blue',
                color: 'white',
                padding: '10px 20px',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer',
                transition: '0.3s',
                ':hover': {
                    backgroundColor: 'red',
                }
            }
        };

        return (
            <button style={styles.base}>Hover over me!</button>
        );
    }
}

// Wrap the Button component with Radium
export default Radium(Button);

 

In this example, we create a Button component using Radium. We define the button's base styles and specify hover styles using Radium's pseudo-selector hover. Then, we export the Button component wrapped with the Radium higher-order component (HOC) to enable Radium's functionality. This allows for dynamic and responsive styling directly within React components.

 

 

You can also use Radium for responsive design by adding media queries directly into your inline styles.

 

 

 

3. Using onMouseEnter and onMouseLeave

There are various ways to utilize onMouseEnter and onMouseLeave, but in this example, I'll demonstrate two popular methods.

• Implementing conditional rendering based on hover states to apply inline styles.

• Using the React state to dynamically change inline styles on hover.

# Implementing conditional rendering based on hover states to apply inline styles.

import React, { useState } from 'react';

const App = () => {
    const [isHovered, setIsHovered] = useState(false);

    const handleMouseEnter = () => {
        setIsHovered(true);
    };

    const handleMouseLeave = () => {
        setIsHovered(false);
    };
    return (
        <div
            style={{
                backgroundColor: isHovered ? 'red' : 'blue',
                padding: '10px',
                color: 'white',
                transition: '0.3s',
            }}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >Hover over me!
        </div>
    );
}

export default App;

# Using the React state to dynamically change inline styles on hover.

import React, { useState } from 'react';

const App = () => {
    const [containerStyle, setContainerStyle] = useState({
        backgroundColor: 'blue',
        padding: '10px',
        color: 'white',
        transition: 'background-color 0.3s',
    });

    const handleMouseEnter = () => {
        setContainerStyle({
            ...containerStyle,
            backgroundColor: 'red',
        });
    };

    const handleMouseLeave = () => {
        setContainerStyle({
            ...containerStyle,
            backgroundColor: 'blue',
        });
    };

    return (
        <div
            style={containerStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
        >
            Hover over me!
        </div>
    );
}

export default App;

Conclusion

We've shared three easy ways to add hover effects using inline CSS styles in React. You should keep in mind that each method has advantages and purposes of its own. So, before picking one, consider what your project needs and decide based on that.

• Styled Components Library: Offers a convenient way to style React components with CSS directly in JavaScript.

• Radium Library: Provides capabilities for adding inline styles with support for pseudo-selectors like hover.

• onMouseEnter and onMouseLeave events: Utilize React state and event handlers to dynamically update inline styles based on hover states.

If you have any questions regarding this article or any other web development, then you can ask them in the question box given below, and you will get the answer soon.