Material UI 禁用特定于浏览器的 CSS 规则 --webkit- 等

Question

我想禁用编译 MUI 时导出的所有浏览器规则:

所以我想看看：

{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-start;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    align-items: flex-start;
}

这个

{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

我找不到使用 MUI4 或 MUI5 执行此操作的方法。

组件

import React from 'react'
import { styled } from '@mui/material'
    
const ChildContainer = styled('div')`
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
`

export const TopNav: React.FC = ({ children, ...props }) => {
  return (
      <ChildContainer data-name="ChildContainer">{children}</ChildContainer>
  )
}

export default TopNav

Answer 1

您可以使用 Emotion 的 CacheProvider component 通过为其提供不利用 prefixer stylis 插件的缓存来控制它。下面是一个工作示例，允许您在是否包含供应商前缀之间来回切换。

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>
  );
}

相关回答：

• （CacheProvider的不同用法）