Source-map file not found? how to fix it
add .env file beside src folder and add this line to it: GENERATE_SOURCEMAP=false npm start
How to fix figma missing font issue even you have that font in your local Machine? 2024
Understanding the Challenge of Missing Fonts in Figma In the dynamic world of digital design, Figma stands out as a powerful tool, enabling designers to create, collaborate, and bring their visions to life with ease. However, even in such an advanced platform, users can encounter certain hurdles that disrupt their workflow. A common issue … Read more
How To implement Google Sign-In using Firebase ReactJS / Next Js #2024
Sure, let’s break down the steps with some additional explanations: Firebase Project Setup: Firebase provides backend services for your web application, including authentication. Create a new project on the Firebase Console to get started. Firebase Authentication Setup: Within your Firebase project, navigate to the “Authentication” section and enable Google as a sign-in provider. This allows … Read more
How-to Use Alpha Color in MUI SX Style ?
In Material-UI (MUI), an “alpha color” refers to a color that includes an alpha channel to specify the level of opacity. The alpha channel is a component of color that represents transparency, with 0 being fully transparent and 1 being fully opaque. In MUI, you can apply alpha to colors in sx like this import … Read more
How To Use MUI alpha gray colors step by step [2024]
here is the grey colors defined in palette.js file const GREY = { 0: ‘#FFFFFF’, 100: ‘#F9FAFB’, 200: ‘#F4F6F8’, 300: ‘#DFE3E8’, 400: ‘#C4CDD5’, 500: ‘#919EAB’, 600: ‘#637381’, 700: ‘#454F5B’, 800: ‘#212B36’, 900: ‘#161C24’, 1000: ‘#FBFBFB’, 500_8: alpha(‘#919EAB’, 0.08), 500_12: alpha(‘#919EAB’, 0.12), 500_16: alpha(‘#919EAB’, 0.16), 500_24: alpha(‘#919EAB’, 0.24), 500_32: alpha(‘#919EAB’, 0.32), 500_48: alpha(‘#919EAB’, 0.48), 500_56: … Read more
How to use MUI Data Grid with custom Fields [images/ button] 2024
Using MUI (Material-UI) DataGrid with a custom button or image involves a few steps. MUI DataGrid is a powerful component for displaying and manipulating tabular data in React applications. Here’s a basic guide on how to integrate custom buttons or images into your DataGrid: 1. Install MUI DataGrid First, ensure you have MUI DataGrid installed. … Read more
How To customize MUI Autocomplete Modal with Own Style? #2024
Customizing MUI Autocomplete Modal Styling in Simple Steps If you’re using Material-UI (MUI) and want to give your Autocomplete component a personalized touch, you’re in the right place! Today, we’ll walk through a simple customization using your own styles. Step 1: Set Up Your Styles In your component file, start by creating your styles using … Read more
How to use raw RGB values in Tainwindcss?
Tailwind CSS primarily uses color names and shades rather than raw RGB values. However, you can convert an RGB color to a hexadecimal (hex) color code and then use that hex color in your Tailwind CSS classes. To convert an RGB color to a hex color code, follow these steps: Convert the RGB values … Read more
by adding which tailwind class you can add a middle color to gradient?
In Tailwind CSS, you can create gradient backgrounds with the bg-gradient-to class, and you can specify multiple colors for the gradient using the from- and via- classes. To add a middle color to a gradient, you would typically use the via- class. Here’s an example of how you can create a gradient with a middle … Read more
What is the utility-first approach in tailwind css? [key principles of the utility-first approach]
The utility-first approach is a fundamental concept in the Tailwind CSS framework. Tailwind CSS is a popular utility-first CSS framework that provides a set of pre-defined utility classes that you can apply directly to your HTML elements to style them without writing custom CSS. Here are the key principles of the utility-first approach in Tailwind … Read more