How you can make your own UI component like MUI in react

welcome to this tutorial where you will learn and understand how to create your own customizable component ,similar to popular libraries like Material-UI and Daisy-UI . If you have any question or doubt then please comment

in this tutorial , i will make a simple component not too complex . lets start

STEP-1 understand file system

i only code in three files :-

1- App.js

2- App.css

3- box.js ( which is inside ./components/box.js )

STEP-2 write code in App.js

first - import all the files and component and try to write " <Box box /> " , " <Box blackBox /> " and " <Box Name = "anything you want "/> " instate of "<Box />"

import * as React from "react";
import Box from "./components/box";
import "./App.css"

function App() {

    return (
        <>
           <Box />  // here
        </>
    );
}

export default App;

STEP-3 write code in box.js

this is the most important part of this tutorial

to understand how code work , you need to pass two argement in the Box function component and set its default value false and currently in this i pass "blackBox = false" , "Box = false" and `Name = "name parameter" `. next we write an if statement , if condition true then style is add in the div and dont worry about styling , i will be talk about in text step

(the main purpose is , if condition is true then a class will add inside the div )

import React from "react";
import "../App.css";

const Box = ({ blackBox = false, box = false, Name = "name parameter" }) => {
    let style;
    if (blackBox == true) {
        style = "blackBox";
    }
    if (Box == true) {
        style = "box";
    }
    return (
        <div className={style}>
            <div> {Name} </div>
        </div>
    );
};

export default Box;

STEP-4 do Some styling in App.css

.box{
background-color: gray;
color: rgb(9, 68, 95);
width:300px;
height:300px;
display:flex;
align-items: center;
justify-content: center;
font-size: 40px;
}

.blackBox{
  background-color: black;
  color: rgb(178, 178, 255);
  width:300px;
  height:300px;
  display:flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;

}

you can create your own component by changing some styling and if statements

if any confusion then please comment