How to write a normal css in to material UI makeStyles when overriding a css for npm package

When using makeStyles in Material-UI to override CSS styles for an npm package, you can write normal CSS rules in the makeStyles function. The makeStyles function accepts a callback function that returns an object with CSS rules. Here's how you can do it:

1. Import makeStyles: Import the makeStyles function from Material-UI.

   jsxCopy code
   import { makeStyles } from '@mui/styles';
   

2. Define Your Custom Styles: Create your custom styles by writing normal CSS rules within the makeStyles function. You can override specific styles for the npm package.

   jsxCopy code
   const useStyles = makeStyles((theme) => ({
     // Your custom CSS rules go here
     container: {
       // Add your custom styles here to override the npm package styles
       // For example, you can change the background color and font size
       backgroundColor: 'red',
       fontSize: '18px',
     },
     // Add other styles as needed
   }));
   

3. Use the Custom Styles: Apply the custom styles to your component by calling the useStyles hook and using the generated classes.

   jsxCopy code
   import React from 'react';
   import YourNPMPackageComponent from 'your-npm-package';
   import { makeStyles } from '@mui/styles';
   
   const useStyles = makeStyles((theme) => ({
     container: {
       backgroundColor: 'red',
       fontSize: '18px',
     },
   }));
   
   const YourCustomComponent = () => {
     const classes = useStyles();
   
     return (
       <div className={classes.container}>
         {/* Your custom content here */}
         <YourNPMPackageComponent />
       </div>
     );
   };
   
   export default YourCustomComponent;
   

In this example, we are using the makeStyles function to create a custom styles object. We are overriding the container class of the npm package component by providing our own backgroundColor and fontSize styles. Then, we apply these custom styles to our own component by calling useStyles and using the generated classes.container in the className attribute.

By using makeStyles in this way, you can easily customize the CSS for the npm package component without directly modifying the package's source code. This approach allows you to keep your custom styles separate and maintainable.