App.module.css

.title {

  color: green;

  font-weight: bold;

}

App.css

.buttonStyle {

  background-color: lightblue;

  padding: 5px 10px;

  border: none;

  cursor: pointer;

}

App. is

import React, { Component } from "react";

import "./App.css";

import styles from "./App.module.css";

class Child extends Component {

  render() {

    return <button style={{color:"white", background:"orange"}} onClick={() => this.props.sayHello("Manasi")}>Say Hello</button>;

  }

}

class App extends Component {

  state = { count:0 };

  componentDidMount(){ console.log("App Mounted"); }

  handleClick = name => { alert(`Hello, ${name}!`); this.setState({count: this.state.count+1}); }

  render() {

    return (

      <div>

        <h2 className={styles.title}>React CSS & Lifecycle</h2>

        <Child sayHello={this.handleClick} />

        <button className="buttonStyle" onClick={()=>this.setState({count:this.state.count+1})}>Increase</button>

        <p>Count: {this.state.count}</p>

      </div>

    );

  }

}

export default App;