You can control this using Emotion's CacheProvider component by providing it with a cache that does not leverage the prefixer stylis plugin. Below is a working example that allows you to toggle back and forth between including the vendor prefixes or not.

import React from "react";
import { CacheProvider } from "@emotion/react";
import createCache from "@emotion/cache";
import { styled } from "@mui/material/styles";
import Button from "@mui/material/Button";
import { prefixer } from "stylis";

const StyledDiv = styled("div")`
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
`;
const cacheNoPrefixer = createCache({
  key: "noprefixer",
  stylisPlugins: []
});
const cacheWithPrefixer = createCache({
  key: "prefixer",
  stylisPlugins: [prefixer]
});

export default function App() {
  const [includePrefixer, setIncludePrefixer] = React.useState(false);
  return (
    <CacheProvider
      value={includePrefixer ? cacheWithPrefixer : cacheNoPrefixer}
    >
      <StyledDiv>
        Including Prefixing: {JSON.stringify(includePrefixer)}
        <Button onClick={() => setIncludePrefixer(!includePrefixer)}>
          Toggle Prefixing
        </Button>
      </StyledDiv>
    </CacheProvider>
  );
}

Related answers:

• How to disable prefixes in Emotion 11 in development?
• Material-Ui TextField not affected with the RTL direction (a different usage of CacheProvider)