0
340
Views¿Cómo eliminar las clases predeterminadas de Mui Typography?
Estoy tratando de crear un elemento de tipografía. Vi que agregó un par de clases MUI CSS predeterminadas al depurar en el navegador. Así que traté de deshabilitarlos creando matrices vacías al final de la propiedad sx. no tuvo efecto
Como se muestra en la imagen, quiero deshabilitar esas 2 clases o al menos respetar las propiedades que tengo. Se las arregla para anular mis propiedades con sus propiedades como margen.
<Typography variant="h1" sx={{ width: '100px', height: '55px', fontSize: '20px', fontWeight: 500, lineHeight: '1.2', WebkitLineClamp: 4, WebkitBoxOrient: 'vertical', marginTop: '11px', '& .MuiTypography-h1': {}, '& .MuiTypography-root': {}, }} > Title </Typography>1 answers
Answer question0
Puede usar el componente StylesProvider que le permite cambiar la forma en que se aplican los estilos a los componentes secundarios. Las opciones estarán disponibles en todos los elementos secundarios de StylesProvider . Podemos usar el accesorio booleano injectFirst para agregar estilos que anulan los estilos de interfaz de usuario de material existentes. De esta manera, los estilos a los que se hace referencia desde archivos CSS externos anularán las UI de Material.
import React from "react"; import StylesProvider from "@mui/styles/StylesProvider/StylesProvider"; import Typography from "@mui/material/Typography/Typography"; import "./styles.css"; export default function CustomTypography() { return ( <StylesProvider injectFirst> <div className="App"> <Typography>Title</Typography> </div> </StylesProvider> ); } En styles.css , puede agregar css personalizado como este:
.MuiTypography-h1 { color: blueviolet; } .MuiTypography-root { color: red; }