MUIDataTable from "mui-datatables" is changing all the styles in my application

Question

when I call the MUIDataTable component (https://www.npmjs.com/package/mui-datatables) it overrides all the CSS on my existing application. I am relatively new to React, so all my styles are in CSS or styles.js files, not in the themes that MUI has.

The same is happening when I use the material-ui-search-bar (https://www.npmjs.com/package/material-ui-search-bar)

It's to do with the different version that npm installs for material-ui/core etc. etc.

How could I make this work? Using --force to npm install doesn't help as such.

import React from 'react'
import MUIDataTable from "mui-datatables";
import { Card, Grid } from '@mui/material';

export const InvoicesTable = () => {
    const datatableData = [
        ["Joe James", "Example Inc.", "Yonkers", "NY"],
        ["John Walsh", "Example Inc.", "Hartford", "CT"],
        ["Bob Herm", "Example Inc.", "Tampa", "FL"],
        ["James Houston", "Example Inc.", "Dallas", "TX"],
        ["Prabhakar Linwood", "Example Inc.", "Hartford", "CT"],
        ["Kaui Ignace", "Example Inc.", "Yonkers", "NY"],
        ["Esperanza Susanne", "Example Inc.", "Hartford", "CT"],
        ["Christian Birgitte", "Example Inc.", "Tampa", "FL"],
        ["Meral Elias", "Example Inc.", "Hartford", "CT"],
        ["Deep Pau", "Example Inc.", "Yonkers", "NY"],
        ["Sebastiana Hani", "Example Inc.", "Dallas", "TX"],
        ["Marciano Oihana", "Example Inc.", "Yonkers", "NY"],
        ["Brigid Ankur", "Example Inc.", "Dallas", "TX"],
        ["Anna Siranush", "Example Inc.", "Yonkers", "NY"],
        ["Avram Sylva", "Example Inc.", "Hartford", "CT"],
        ["Serafima Babatunde", "Example Inc.", "Tampa", "FL"],
        ["Gaston Festus", "Example Inc.", "Tampa", "FL"],
    ];

    return (
        <>
            <h1>title</h1>
            <Grid container spacing={4}>
                <Grid item xs={12}>
                    <MUIDataTable
                        title="Employee List"
                        data={datatableData}
                        columns={["Name", "Company", "City", "State"]}
                        options={{
                            filterType: "checkbox",
                        }}
                    />
                </Grid>
            </Grid>
        </>
    )
}

Normal page:

On the page where the MUIDataTable renders, all CSS is messed up:

Answer 1

Was facing the same issue updating mui-data tables to V4.2.2 resolved the issue