I have this strange **Material UI CSS** issue going on. So basically I am working on a company project with another developer. I've been using **MUI version 5**.

​

Today my co-worker did not realize that we already had a Version 5 MUI package and for some unknown reason she decided to use an older version of **MUI version 4**.

​

Now I noticed when she

imported `import { Switch } from "@material-ui/core";` specifically using `@material-ui/core (V4)` that it would strip my *AutoComplete Function Styles* and make all the styles appear unset or disoriented. So after 5 hours, I found that if I switch HER MUI version to `Version 5` --> `import { Switch } from "@mui/material/";` THEN all of my styles would work !!

​

It appears as if it is mandatory to only use ONE version of MUI at a time.

​

_(side note):_ Now I know you might be thinking .. "well it sounds like an external stylesheet is the cause of the override" we'll there were no external stylesheets even set.. just the default styles that come embedded within the MUI components themselves.

Oddly it’s almost as if after react reads that the Switch component is V4 that when it reaches the autocomplete component which is a V5 component .. that it somehow thinks it’s V4 and gets confused and just disorients the styles.. but if that theory is true, how could that even be possible because MUI decided to strangely have 2 separate NPM packages for V4 & V5.

​

Here was the initial bug below:

​

​

**React Code**

           import * as React from 'react';
            import TextField from '@mui/material/TextField';
            import Autocomplete from '@mui/material/Autocomplete';

    // "@material-ui/core IS THE ISSUE
            import { Switch } from "@material-ui/core";
            import { useStyles } from "./SwitchToggle.styles";

            export default function ComboBox() {
          // FOR AUTOCOMPLETE
         // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top
            const top100Films = [
              { label: 'The Shawshank Redemption', year: 1994 },
              { label: 'The Godfather', year: 1972 },
            ];

            //FOR SWITCH TOGGLE
              const classes = useStyles();
              const {status} = props;
              const [statusToggle, setStatusToggle] = React.useState({
                checked: status
              });

              const handleChange = (event) => {
                setStatusToggle({ ...statusToggle, [event.target.name]: event.target.checked });
              };

              return (
            <div>

            <div>
                  <Switch
                    classes={{
                      root: classes.root,
                      switchBase: classes.switchBase,
                      thumb: classes.thumb,
                      track: classes.track,
                      checked: classes.checked
                    }}
                    checked={statusToggle.checked}
                    onChange={handleChange}
                    name="checkedA"
                    inputProps={{ "aria-label": "secondary checkbox" }}
                  />
                </div>

            // V5 MUI STYLES DISOREIENTED BECAUSE OF SWITCH TOGGLE MUI V4 IMPORT
                <Autocomplete
                  disablePortal
                  id="combo-box-demo"
                  options={top100Films}
                  sx={{ width: 300 }}
                  renderInput={(params) => <TextField {...params} label="Movie" />}
                />
            </div>
              );
            }

​

Everything worked once, I switched it to from `import { Switch } from "@material-ui/core";` to `import { Switch } from "@mui/material/";`

Now YES it is resolved and obviously, we will be using only ONE version of MUI but I want to know the technicalities behind this! Technically `Version 4 MUI u/material-ui/core` & `Version 5 Mui u/mui/material` are 2 separate NPM packages.. they have NOTHING to do with one another theoretically, so why would a component using `@material-ui/core` strip my MUI component imported via `@mui/material`?? I cannot figure this out for the life of me.

​

**package.json**

​

    "@material-ui/core": "^4.7.0",

    "@emotion/react": "~11.9.0",
        "@emotion/styled": "~11.8.1",
        "@mui/icons-material": "~5.6.2",
        "@mui/material": "~5.6.3",
"react": "^16.12.0",