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 组件来控制这一点，方法是为其提供不利用prefixerstylis 插件的缓存。下面是一个工作示例，允许您在包含或不包含供应商前缀之间来回切换。

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

相关回答：

• 如何在开发中禁用 Emotion 11 中的前缀？
• Material-Ui TextField 不受 RTL 方向影响（ 的不同用法CacheProvider）