Tips for eliminating default classes from Mui Typography styling

I’ve been working on creating a Typography element and noticed some default MUI CSS classes added when debugging in the browser. I attempted to disable them by using empty arrays at the end of the sx prop, but it did not work as expected.

In the image provided, you can see that I am trying to deactivate those 2 classes or at least have my properties respected. However, the default styles seem to override mine, especially when it comes to margins.

https://i.stack.imgur.com/W8L8r.png 

<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>

javascripthtmlcssreactjsmaterial-ui

Answer №1

If you want to customize how styles are applied to child components, the StylesProvider component is the way to go. By using the injectFirst boolean prop, you can ensure that styles from external CSS files take precedence over Material UI’s default styles.

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

In styles.css, you have the flexibility to add custom CSS for specific elements:

.MuiTypography-h1 {
  color: blueviolet;
}

.MuiTypography-root {
  color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to utilize a JavaScript variable in this particular scenario and if so, what is the

let myVariable = <?php echo json_encode($a[i want to insert the JS variable here]); ?>; Your prompt response would be highly valued. Many thanks in advance. ...

javascriptphpjson

React-redux: There is a TypeError in the code, as _this2.props.handleCityChange is not recognized as

I am currently working on integrating a weather widget in react-redux. I keep encountering the error message "TypeError: _this2.props.handleCityChange is not a function" and similar errors for other functions as well. Despite referring to the redux documen ...

javascriptreactjsreduxreact-redux

What is causing my jQuery to only impact the initial item in my iron-list?

How can I create a toggle effect for the left border of an iron-list entry in Polymer when clicking on it? I found some jQuery code that adds the border to the first entry clicked, but I need help extending this functionality to apply to all list entries ...

jqueryhtmlcsspolymer

Creating an external link in Angular with query parameters

I have created an app where users have their addresses listed, and I want to implement a feature that allows me to open Google Maps when clicking on the address. However, I am currently facing an issue where instead of getting the actual value of {{ this. ...

javascriptangulartypescript

Looking to update the key name in a script that produces a list sorted in ascending order

I have been working on code that iterates through a flat json document and organizes the items into a hierarchical structure based on their level and position. Everything is functioning correctly, but I now need to change the name of the child elements to ...

javascriptnode.js

Understanding the specific types of subclasses derived from an abstract generic class in Typescript

There is a Base generic class: abstract class BaseClass<T> { abstract itemArray: Array<T>; static getName(): string { throw new Error(`BaseClass - 'getName' was not overridden!`); } internalLogic() {} } and its inherito ...

javascripttypescriptabstract-class

Tips for updating a JSON object value in Node.js

Storing a JSON object in a JSON file is important for passing data during an API call. To update the object, replace "it-goes-here" with the following {} block. Newly updated data: { "parenturl":"xxx.com", "user ...

javascriptnode.jsjsontypescriptobject

Python allows for the sending of HTML content in the body of an email

Is there a way to show the content of an HTML file in an email body using Python, without having to manually copy and paste the HTML code into the script? ...

pythonhtmlemail

A guide to optimizing material ui Datagrid performance in React using memoization

Having trouble implementing memoization on my Material UI Datagridtable in React const Mockdata = [{id: 1 , user: "john",School: "LAL" }, {id: 2 , user: "Ruby",School: "LAL" }] const column = [ { field: "u ...

reactjsmaterial-uidatagridmui-x-data-grid

Which approach is more efficient: storing fetched data in state or continuously re-fetching it using server functions in next.js 13?

Currently immersed in a project involving Next.js, I find myself questioning the most efficient data fetching method. In the latest version of Next.js, direct database data retrieval is enabled through server components. In contrast, older versions requi ...

reactjsnext.jsnext.js13

Elevate Your Designs: A New Perspective on Vertical Alignment

I am struggling to vertically align my text, which spans multiple lines, while implementing the scroll-over effect. I attempted to include vertical-align: middle; in my code, but unfortunately, it did not produce the desired result. Here is my CSS code: ...

htmlcss

Modify the title attribute within a span tag in PHP using AJAX

I'm currently working with Zend Framework 2 and I have a requirement to translate a string in my index.html file, which displays a tool tip when hovering over a span tag. The challenge I face is that this value needs to change dynamically after perfor ...

phphtmlajaxzend-framework2

Creating a hover effect for displaying image masks

My website features a profile page displaying the user's photo. I am attempting to create a functionality where when the user hovers over their photo, a transparent mask with text appears allowing them to update their profile picture via a modal. How ...

javascriptjquerycss

Can you explain the significance of network activity groupings within the Firebug Net tab?

Can you explain the significance of different splitter lines on the Net tab in Firebug? In this screenshot, line 1 and 2 appear to be grouped together. However, line 3 stands alone. What do these groupings represent? ...

javascriptajaxfirefoxfirebug

Update the state in the componentDidMount lifecycle method

Embarking on a project using React to hone my skills, but encountered an error while trying to populate an array with data from a JSON file in the ComponentDidMount() hook. It seems this issue stemmed from a previous error: cannot read property 0 of undef ...

javascriptreactjsfrontend

What are some ways to accomplish this task without relying on a photo editing tool?

Is it possible to swap the image link: with this new link: without having to use a photo editor? Below is the CSS and HTML code: I was unable to upload the logo due to the restriction of needing at least 10 reputation points in order to post more t ...

javascriptjqueryhtmlcss

Tips for resolving the UNABLE_TO_GET_ISSUER_CERT_LOCALLY issue while attempting to install Sentry using npm or curl

https://i.stack.imgur.com/G8hfZ.png curl -sL -k https://sentry.io/get-cli/ | bash Even though I've specified not to verify the certificate with -k, I'm still facing issues trying to install it. The script is supposed to automatically install sen ...

javascriptnpmcurlinstallationsentry

When the CKEDITOR is set to fullPage mode, it cannot properly apply styles from an external stylesheet that is configured in the config.contentscss setting

To create a custom StyleSet in CKEditor using styles from an external stylesheet, I configured the settings as follows: config.extraPlugins = 'stylesheetparser'; config.contentsCss = '/css/externalStyleSheet.css'; config.stylesSet = [ { ...

cssiframeckeditorckeditor4.x

Pressing the shortcut key will activate the function specified in ng-click,

I have been searching for a solution to my problem, but I haven't found anything that really helps. What I am looking for is a shortcut within an ng-click directive where there is only an if condition without an else expression. Essentially, I just wa ...

javascripthtmlangularjsif-statementangularjs-ng-click

Prepared SQL Statement in NodeJS for MSSQL using WHERE IN clause

I'm using the sql npm package in my Node.js project. Currently, I have an array of product SKUs like this: var skus = ['product1', 'product2', 'product3']; The SQL query stored in a file looks like this: SELECT * FROM ...

javascriptsqlsql-servernode.jsprepared-statement