Inline CSS in React JS

In React, you can apply styles directly to elements using the `style` attribute, which allows you to apply **inline styles**. Inline CSS in React is specified as a JavaScript object, where keys are CSS properties in camelCase format and values are strings.

1. Basic Inline CSS Example

In this example, we use the `style` attribute to apply inline CSS directly to a React element. This method allows dynamic styling by using JavaScript objects.

        // App.js
        import React from 'react';

        const App = () => {
            // Defining the inline styles in a JavaScript object
            const headingStyle = {
                color: 'blue',
                fontSize: '36px',
                fontWeight: 'bold',
            };

            return (
                

                    
Hello, React with Inline CSS!
                    
                        Click Me
                    
                
            );
        };

        export default App;
    

2. Dynamic Inline Styles with React State

Inline CSS in React can also be dynamic, meaning you can update styles based on the component's state or props. Below is an example where the button style changes when clicked.

        // App.js
        import React, { useState } from 'react';

        const App = () => {
            const [isClicked, setIsClicked] = useState(false);

            // Dynamic style based on state
            const buttonStyle = {
                backgroundColor: isClicked ? 'blue' : 'green',
                color: 'white',
                padding: '10px 20px',
                borderRadius: '5px',
            };

            return (
                

                    
Hello, React with Dynamic Inline CSS!
                     setIsClicked(!isClicked)}>
                        {isClicked ? 'Clicked!' : 'Click Me'}
                    
                
            );
        };

        export default App;
    

3. Using Tailwind CSS with Inline Styles

You can also combine Tailwind CSS with inline styles in React. This allows you to use Tailwind utility classes for most of your styling while applying custom styles with the inline `style` attribute.

        // App.js
        import React from 'react';

        const App = () => {
            // Inline style object
            const cardStyle = {
                boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)',
                borderRadius: '10px',
            };

            return (
                

                    
Hello, React with Tailwind and Inline CSS!
                    

                        
This is a styled card using Tailwind and inline CSS.
                    
                
            );
        };

        export default App;