What causes custom CSS properties to be overridden by Material UI CSS class properties?

I encountered an issue while attempting to utilize an npm package containing a Typography element from Material UI. The code is authored by me. Upon integrating it into a project, I noticed that the typography's CSS class properties were overpowering my custom CSS properties. For instance, the margin property present in both the custom and "MuiTypography-h1" classes resulted in the latter taking precedence in certain scenarios. How can I tackle this problem?

My belief is that custom CSS properties should always override MUI default CSS class properties. Is there a way to achieve this? https://i.sstatic.net/Tbf4X.png

<Typography
    variant="h1"
    sx={{
        width: '235px',
        height: '96px',
        fontSize: '20px',
        fontWeight: 500,
        lineHeight: '1.2',
        color: 'primary',
        textOverflow: 'ellipses',
        overflow: 'hidden',
        display: '-webkit-box',
        WebkitLineClamp: 4,
        WebkitBoxOrient: 'vertical',
        marginTop: '11px',
    }}
>
    Title
</Typography>

htmlcssreactjsmaterial-ui

Answer №1

A simple method to achieve this: 🚀 One option is to directly modify the MUI component using your own CSS properties by referencing the class name in your stylesheet. For instance, if you wish to customize the Button component's appearance, you can accomplish this by adding your desired CSS attributes to the "css-element-class-name" class in your CSS file like so:

.css-elemet-class-name{
   color: yellow;
   height: 25px;
   padding: 15px;

}

Answer №2

Creating a MUI theme is essential to override MUI root properties with your custom CSS styles. Here's an example to get you started:

Add your custom styles inside overrides:{}

const customTheme = createTheme({
  overrides: {
    MuiTypography: {
      h1: {
        '&.MuiTypography-gutterBottom': {
          marginBottom: 7,
        },
      },
      h2: {
        marginBottom: props => (props.gutterBottom ? 20 : null),
      },
    },
  },
});

Don't forget about the imports:

import createTheme from '@material-ui/core/styles'

If you are using version 4.11.2 of "@material-ui/styles":

"@material-ui/styles": "^4.11.2",

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

A pair of floating divs sandwiching a stretchy div in the middle

I am looking to achieve a fixed width header with specific layout requirements: A left-aligned div of variable width. A right-aligned div of variable width. An h2 element centered between the two divs, adjusting its size based on available space. The co ...

csslayouthtmlcss-float

Verify the user's admin role before granting access to a specific page in a web application built with React, Express, NodeJS, and

To ensure that only admin users can access the "Users" page, which displays all registered users on the website, a specific component is needed: <Route path="/users" exact component={Users} /> Although I attempted the following code below, it did n ...

node.jsreactjsexpress

How to Reference a Local File in PHP using Zend Framework for jQuery's .Load Function

I'm currently working on a PHP Zend framework website and I'm trying to link to a local file. The file structure is as follows: public_html/application/views/index/filename1.phtml Within filename1.phtml, I want to make a jQuery call to load a ...

phpjqueryhtmlzend-framework

Is there a way to create a table cell that occupies zero space?

I have a very intricate table setup that resembles a tree structure, with only a few cells on the left and many on the right. I am looking to completely hide specific cells, along with their entire rows, using JavaScript based on their class. Using visibi ...

htmlcssfontscss-tables

Tips for configuring maxLength property within Material-UI's <Input /> element

<Input name="location" value={this.state.location} inputProps={{ maxLength: 6, }} //other props /> I've implemented this code snippet but unfortunately it doesn't seem to be functioning as expect ...

reactjsinputmaterial-ui

Using Node JS to serve an HTML file along with cascading style sheets

As I delve into pure node.js, I encountered an issue related to the HTTP protocol. After spending hours searching and testing my code, I finally managed to serve my HTML page with CSS successfully. Take a look at my code snippet below: const server = http ...

htmlcssnode.jshttp

Exploring the application of the PUT method specific to a card ID in vue.js

A dashboard on my interface showcases various cards containing data retrieved from the backend API and stored in an array called notes[]. When I click on a specific card, a pop-up named updatecard should appear based on its id. However, I am facing issues ...

javascripthtmlcssvue.jsaxios

Having trouble with the link attribute not functioning properly for a radio button in Chrome?

<a> hyperlink for radio button is not functioning correctly in Chrome. Here is the code segment in question: <td width='7%' bgcolor='#E8E8E8'> <a href='issue.php?admin=Yes&&user=$user'> <inp ...

html

Leveraging React Context: Opting for a custom hook versus a provider-centric logic strategy

As I prepare for an upcoming development project that requires a global state, I am faced with deciding on the best approach. Initially, my plan was to create a context for this purpose but now I'm unsure of what route to take. Exploring the option o ...

reactjsreact-hooksreact-context

What is the best way to address caching fonts and files within CSS?

Utilizing the font icon for displaying icons may result in difficulty when adding new icons to the font due to caching issues. Clearing the cache is often necessary to refresh the display. How can I address this concern? ...

cssreactjssassscss-mixins

Having trouble with implementing the signIn function of NextAuth.js server-side and cannot seem to get the redirect working. Need

Currently working on incorporating NextAuth.js into a React JS / Next JS project. The versions I am using are React JS 18.2.0, Next JS 13.0.6, and NextAuth.js 4.18.0. My setup involves server-side rendering with Next API calls deployed on Vercel. To estab ...

reactjsnext.jsnext-auth

What is the proper way to mention JavaScript packages when including them as parameters in Angular elements within HTML?

I was looking to enhance the command to be more authoritative. <div (click)="lastCall(999)">click me</div> My attempt to utilize Number.MAX_SAFE_INTEGER resulted in an error from my computer stating that it wasn't recognized. As a result ...

javascripthtmlangulartypescript

How can I retrieve and showcase the size of each file, including images, CSS, and JS, present on a website?

Currently, my goal is to create a dashboard capable of retrieving the file size for all resources (images, javascript, css, etc.) loaded on a webpage. I aim to then further filter these resources by file type and file size in order to identify which ones c ...

javascripthtmlcss

The ongoing battle between Carousel full page image slider and multi div slider in Bootstrap 4

I need a full-page carousel image slider in one div container and a multi-div slider in another div container on my homepage. Unfortunately, due to some conflicting class names (such as carousel slide, carousel-inner, etc.), they are interfering with each ...

jqueryhtmlcssbootstrap-4

If the item has an active class, apply a new class to the parent element and all of its

If I have code like the example below and want to add the show class to the parent and ancestors. // The last `nav-item` has the `active` class <div class="nested-group nested-item show"> <div class="nested-item show"> <div class="n ...

javascriptjqueryhtmlcss

The React MUI Tab component triggers a re-render and clears the states of its child components

In our endeavor to create a Tab Page using React MUI, we aim for each Tab to contain a child component. While there are no issues when adding these child components individually to a page without tabs, problems arise when incorporating them within the Tab ...

javascriptreactjsmaterial-uitabs

Tips for dividing by a large number

I am currently attempting the following: const numerator = 268435456; const denominator = 2 ** 64; const decimalFraction = numerator / denominator; In order to achieve this, I have experimented with utilizing the code provided in this link: : const rawVal ...

javascriptreactjstypescriptcreate-react-appbigint

Retrieving and securely storing information using fetch() on authenticated REST services

Currently, I have successfully set up a React application that communicates with a REST backend which is built using Python and Flask. The specific functionality I have achieved involves downloading data from a database and saving it as a CSV file through ...

javascriptajaxreactjsflaskxmlhttprequest

"Enhancing the aesthetics: Stylish blue borders around Bootstrap

After successfully setting up bootstrap-select, I have noticed that blue borders are showing in two specific instances: 1) within the dropdown menu 2) when a new value is selected I have made some adjustments but the issue persists. Can someone please p ...

csstwitter-bootstrapbootstrap-select

Retrieving Dynamic data from an HTML form and saving it in PHP variables

Currently, I am in the process of taking an online aptitude test where 2 random questions are selected from a database and displayed on the webpage for answering. The issue I'm facing is that the values are not being stored correctly in the database. ...

phphtmlmysqlsqldatabase