0
227
ViewsLa interfaz de usuario del material deshabilita las reglas CSS específicas del navegador --webkit- etc.
Me gustaría deshabilitar todas las reglas del navegador que se exportan cuando se compila MUI 
:
Entonces me gustaría ver:
{ 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; }Esta
{ display: flex; justify-content: space-between; align-items: flex-start; }No puedo ver una manera de hacer esto con MUI4 o MUI5.
Componente
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
·
Santiago Trujillo
1 answers
Answer question0
Puede controlar esto usando el componente CacheProvider de Emotion al proporcionarle un caché que no aproveche el complemento de estilo de prefixer . A continuación se muestra un ejemplo de trabajo que le permite alternar entre incluir o no los prefijos del proveedor.
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> ); } 
Respuestas relacionadas:
- ¿Cómo deshabilitar prefijos en Emotion 11 en desarrollo?
- Material-Ui TextField no afectado con la dirección RTL (un uso diferente de
CacheProvider)
·
Santiago Trujillo
Report
Answer question