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

Ways to display and modify chosen and not chosen categories on the product editing page

I have three tables Categories: cat_id ... other ... primary key (cat_id) Product: Product_id ... other ... primary key (Product_id) Product_cat: Product_id foreign key (post.Product_id) cat_id foreign key (Categories.cat ...

phphtmlmysql

Disable button with Checkbox Javascript functionality

In my PHP code, I have an array of users that I pass to the view (in Laravel) and use a foreach loop to display all users in a table. Everything is working fine so far. However, I want to make a "send" button visible when a checkbox is clicked, instead of ...

javascriptphphtmlcheckbox

Experiencing difficulty creating a project using create-react-app

Currently, I am running Linux on windows through WSL. Whenever I attempt to scaffold a project using create-react-app, the following error message pops up: error An unexpected error occurred: "ENOENT: no such file or directory, lstat '/home/sashacode ...

node.jsreactjsnpmcreate-react-appyarnpkg

Struggling to show labels in the correct position for each button?

I need help with aligning labels under buttons. I have 3 buttons, each with a corresponding label. I want the labels to be displayed in line under the buttons, and if the length of a label exceeds the button width, it should wrap to the next line. I'v ...

htmlcss

Having issues with stripe payments in my ReactJS application

I've encountered an issue while attempting to process a credit card payment using Stripe. Here's the code snippet I'm currently working with: import StripeCheckout from "react-stripe-checkout" // import confirmPayment from 'st ...

node.jsreactjsstripe-paymentspaymentcard

Creating a Hover Effect for DIV Elements Using Pure CSS, No JavaScript Needed

Imagine a straightforward, horizontal navigation on a website: | Home | About | Products | Contact | Impress | ... or something like that... A rectangular element is positioned above the navigation. Now, I want this rectangle to automatically shift hori ...

htmlcssanimationhover

Having trouble passing parameters to the Mongo find collection operation

I'm having trouble with my code where req.params only gets a value after db.collection.find is executed. Can someone help me figure out what I'm doing wrong? exports.findAll = function(req, res) { var postal = parseInt(req.params.postal); ...

javascriptnode.jsmongodbnode-mongodb-native

Looking to create circular text using HTML, CSS, or JavaScript?

Is there a way to generate curved text in HTML5, CSS3, or JavaScript similar to the image linked above? I've experimented with transform: rotate(45deg); but that just rotates the text without curving it. Additionally, when using Lettering.JS to curve ...

javascriptcsstext

Exploring the Methods of Page Navigation in React Testing Library (Utilizing Link, a Tag, and history.push)

I am attempting to perform DOM testing on the '/test' URL page. My application utilizes BrowseRouter from react-router-dom. Despite following the user approach, I am trying to manually navigate to the '/test' page using <Link /> ...

reactjsjestjsreact-testing-library

Ways to expand the constructor function of the THREE.Mesh class

Exploring Three.js, I'm working on creating a basic model of the solar system. My current task involves building constructor functions for planets and moons. However, I keep encountering an error message: The function setShadow() is not recognized. ...

javascriptthree.jsextend

Setting a single value for several identifiers within a JSON object

I'm new to JSON and I'm curious if it's possible to have a name/value pair with multiple names. Essentially, I want to be able to search for either name and retrieve the same value without having to update the value in two different places. ...

javascriptjson

Display and conceal multiple div elements using a timer

Currently, I am working on creating a message box that will display active messages one by one from a MySQL table. The challenge is that the number of divs needed can vary depending on the number of active messages in my database. Using an ajax timer and P ...

phpjavascriptjqueryajaxtimer

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : And for smaller windows : ...

javascriptjqueryhtmlcssnavigation

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

javacssjavafxtreetableview

"NaN is being caused by the presence of quotation marks within the split property

Apologies if this question has already been addressed, but I'm struggling to find the answer. I've recently delved into coding as a new hobby and found it quite enjoyable. After using a website that claimed I had learned all there is to know abou ...

javascriptsplit

The condition is not functioning properly when the array's length is greater than 1

Within the primary controller, there is an if-else statement: var entity = shareDataService.getModalEntity(); if (entity = "NULL" || entity.length === 1) { myDataPromise = getDataService.getDataFromREST(security); console.log("HERE") } else { ...

javascriptarraysangularjs

How can I delete the black background from the ion-tab-bar in Ionic 7?

In my current project using Ionic 7, I have a navigation guide set up with 4 tabs. I am trying to customize the styling of these ion tabs by adding some custom CSS. The issue I'm facing is that despite my attempts to make the background transparent, ...

javascriptcssangularionic-framework

Guide to showing an HTML string retrieved from MongoDB with the help of Express

I need help with displaying or rendering an HTML string retrieved from the database. Any assistance would be greatly appreciated. Below is the controller function responsible for rendering the data: exports.previewPageView = (req, res, next) => { / ...

htmlnode.jsmongodbexpress

What are the steps for setting up a live commenting feature in a django-react application using channel, celery, and redis technologies?

Currently, I am developing a web application with Django serving as the backend and React handling the frontend. Within this application, there are multiple users associated with an organization or company. My goal now is to integrate a real-time commentin ...

reactjsdjangorediscelerydjango-channels

The ID update functionality in Node.js is malfunctioning

Hello everyone, I am currently venturing into the world of NodeJS with a goal to create a backend API for a car rental agency. After writing some code to update, view, and delete records by id stored in MongoDB, I encountered a strange issue where it only ...

javascriptnode.jsmongodbexpressmongoose