Custom Component style(React)

There is one important thing to know it . Card here is a custom component , its not one of those built in HTML components. And therefore , since it's our Own component , it only has the props , or it only is able to work with the props we use inside of that component. Now, these default HTML components like form ," label,input,divs " and so on , they all are pre-configured by React to for example work with the "className" prop and to then apply a fitting CSS class. Now for our Own component , it of course does not know what to do with the "className" prop cz it's just our component , not a built in HTML Component. So we have to Go to our component and make sure that we accept incoming class named prop. and then we do something with it.

import React from 'react';
import Card from '../UI/Card';
import classes from './AddUser.module.css';

const AddUser = (props) => {
    const addUserHandler = (event) => {
        event.preventDefault();
    }
    return (
        <Card className={classes.input}>
            <form onSubmit={addUserHandler}>
                <label htmlFor='username'>Username</label>
                <input id='username' type="text"></input>
                <label htmlFor='age'>Age (Years)</label>
                <input id='age' type="number"></input>
                <button type='submit'>Add User</button>
            </form>
        </Card>
    );
}

export default AddUser;