How to Set Text Color in ReactJS ?

// App.js
import React from 'react';
import './style.css'; // Import the CSS file
const App = () => {
    return(
        <div className=container
            <h1 className="heading">
                Geeksforgeeks
            </h1>
            <div className="text-color">
                A Computer Science portal for 
                geeks. It contains well written, 
                well thought and well explained
                computer science and programming 
                articles
            </div>
        </div>
    </>;
};
export default App;

import React, { useState } from 'react';

const App = () => {
    const [textColor, setTextColor] = useState('black');

    const handleColorChange = () => {
        const newColor = textColor === 'black' ? 'red' : 'black';
        setTextColor(newColor);
    };

    const styles = {
        container: {
            textAlign: 'center',
            margin: '50px auto',
            padding: '20px',
            border: '2px solid #333',
            borderRadius: '5px',
            backgroundColor: '#f5f5f5',
            maxWidth: '600px',
        },
        heading: {
            color: '#333',
        },
        colorButton: {
            backgroundColor: '#4caf50',
            color: 'white',
            border: 'none',
            padding: '10px 20px',
            cursor: 'pointer',
            borderRadius: '5px',
            fontSize: '16px',
            marginTop: '20px',
        },
        colorButtonHover: {
            backgroundColor: '#45a049',
        },
        content: {
            fontSize: '18px',
            marginTop: '30px',
        },
    };

    return (
        <div style={styles.container}>
            <h1 style={styles.heading}>
                Geeksforgeeks
            </h1>
            <button
                style={styles.colorButton}
                onMouseEnter={(e) => 
                e.target.style.backgroundColor = styles.colorButtonHover.backgroundColor}
                onMouseLeave={(e) => 
                e.target.style.backgroundColor = styles.colorButton.backgroundColor}
                onClick={handleColorChange}
            >
                Change Text Color
            </button>
            <div style={{ ...styles.content, 
                         color: textColor }}>
                A Computer Science portal for geeks. 
                It contains well written, well
                thought and well explained computer 
                science and programming articles.
            </div>
        </div>
    );
};

export default App;