Custom override of SX prop classes with Material-UI theme

I am currently working on customizing a component using the sx MUI prop.

<Typography
        variant='h1'
        align='center'
        sx={{ fontSize: '24px', pb: '8px', fontWeight: '700' }}
    >
        Admin Panel
</Typography>

The issue I am facing is that classes from the MUI theme have higher CSS specificity, causing them to override those set in the sx prop.

Below is the configuration of the MUI theme for typography:

typography: {
        h1: {
            fontSize: '2rem',
            '@media screen and (min-width: 768px)': {
                fontSize: '3rem',
            },
            '@media screen and (min-width: 1024px)': {
                fontSize: '3.5rem',
            },
        },
    },

You can also view how it appears in the developer tools by clicking the following link: https://i.sstatic.net/yBhkn.png

Is this behavior expected? Is there a workaround I can implement to resolve this issue?

cssreactjsmaterial-ui

Answer №1

It is important to note that styles applied from your theme will carry more weight in terms of specificity. The selector's significance of 

@media screen and (min-width: 768px) .root'
exceeds that of just .root. You can either include an !important declaration in your sx property (although this is not recommended), or incorporate the @media sreen... within your sx styles as well.

Answer №2

When it comes to specificity in CSS, media queries do not play a role. It is the order of placement within the css file that determines the styling hierarchy.

@media screen and (min-width: 768px) {
  body {
    background: salmon;
  }
}

body {
  background: beige;
}

In this scenario, the body will have a beige background because it is defined after the media query.

It's possible that in the original poster's situation, MUI may be positioning media queries at the end of generated files, potentially causing conflicts with other styles.

(I am submitting an answer here as commenting restrictions prevent me from including code or detailed paragraphs)

Although it might be late for OP, it's important to remember that media queries do not impact specificity.

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

particular shade for button border and background

I'm looking to create a button using Material UI that has a specific design. Right now, I've only been able to achieve this: https://i.stack.imgur.com/xvv7s.png Here is the code I am currently using. If anyone can help me identify what I'm ...

cssmaterial-ui

The audio from the local source is not being received on the remote end

I have been working on developing a web app that incorporates audio and video calls using WebRTC technology. While the local audio and video functionalities work perfectly within my web app, I am facing an issue where the remote audio and video streams are ...

reactjsaudiowebrtc

Populating a NextJs application with the contents of files as environment variables dynamically during runtime

I am working on a way to dynamically load the contents of files from a specific folder as environmental variables accessed at process.env.SomethingHere during runtime rather than build time. Since these files do not exist during build time, I need to figur ...

reactjsazurekubernetesnext.jsenvironment-variables

The command 'create-react-app' is not valid and cannot be recognized as an internal or external command, operable program, or batch file

I've been struggling to set up a React project, as the create-react-app my-app command doesn't seem to be working. Can anyone offer some assistance? Here are the commands I'm using: npm install -g create-react-app create-react-app my-app ...

javascriptnode.jsreactjsreact-nativenpm

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

htmlcssasp.net

Adding text on top of images for optimal mobile viewing

I'm struggling to ensure that the text stays contained next to the image. It's working fine on desktop and tablet, but I'm facing challenges with mobile. While I have managed to improve it slightly, I can't figure out what exactly I am ...

csswordpress

I am eager to develop my React application, however, I encountered an issue with the error message "TypeError: MiniCssExtractPlugin is not a constructor

Error in webpack configuration file: MiniCssExtractPlugin is not recognized as a constructor. This error occurred at line 664 in the webpack configuration file located at D:\React JS Projects\React Facts\reactfacts\node_modules\rea ...

reactjsnpmbuild

Unlocking the contents of an array from a separate file in Next.js

I am developing a Quiz App that consists of two main pages: takeQuiz.js and result.js. My goal is to transfer the data from the multiple-choice questions (mcqs) in takeQuiz.js to be accessible in result.js. Utilizing router.replace(), I ensure that once th ...

javascriptnode.jsreactjsnext.js

What is the process for linking a form submission in NextJS to MongoDB?

I'm currently diving into NextJS and struggling to connect my form with the database. Which hooks should I be using alongside Next for this task? I've been adding data through Postman, but I can't seem to establish the connection with the f ...

reactjsmongodbnext.js

Is it essential to install npm react and react-dom when setting up a create-react-app project?

After going through the documentation on reactstrap, I found that it recommends installing npm packages with the following commands: npm install --save bootstrap npm install --save reactstrap react react-dom I'm wondering if it is actually required t ...

reactjsnpmreactstrap

When you add the /deep/ selector in an Angular 4 component's CSS, it applies the same style to other components. Looking for a fix?

Note: I am using css with Angular 4, not scss. To clarify further, In my number.component.css file, I have: /deep/ .mat-drawer-content{ height:100vh; } Other component.css files do not have the .mat-drawer-content class, but it is common to all views ...

htmlcssangularjsangularangular-material2

I need to adjust the alignment of the text within my list item that includes a time element

I am struggling with aligning my elements vertically downward as the text following the "-" appears disorganized. I attempted to enclose the time tags within div elements and align them so that they evenly occupy space, but this approach did not work. Ins ...

htmlcss

Next.js does not recognize the definition of RTCPeerConnection

Looking for a way to utilize the React context API in order to pass an instance of RTCPeerConnection to my React Component tree. Despite being familiar with Next.js SSR feature, which initially renders components on the server side, none of the solutions I ...

reactjsnext.jswebrtcreact-context

An arrow function fails to activate

Here is the code snippet that I am dealing with: class App extends React.Component { loginComponent = <button onClick={this.signUp}>Sign Up</button>; signUp = () => { alert("test"); } rende ...

javascriptnode.jsreactjs

Error message 2339 - The property 'toggleExpand' is not recognized on the specified type 'AccHeaderContextProps | undefined'

When utilizing the context to share data, I am encountering a type error in TypeScript stating Property 'toggleExpand' does not exist on type 'AccHeaderContextProps | undefined'.ts(2339). However, all the props have been declared. inter ...

reactjstypescriptreact-context

Is there a way to send an array of objects to my Express / SQL Server in react?

I am currently facing a challenge with passing an array of objects to my back end (SQL Server). Below is the specific array of objects: console.info(results) Here is the array of objects named results: [0] [ [0] { [0] answer: 'bmbm,nn', [ ...

javascriptsqlsql-serverreactjsexpress

Personalize the MUI date picker widget

Is there a way to customize the appearance of the Mui date picker paper? I attempted to change its color by applying styles to the `PaperProps` within the `DialogProps`, as shown in the code snippet below. However, the color isn't being updated. <D ...

reactjsmaterial-ui

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

jqueryhtmlcssajaxgallery

How can we implement conditional mandatory fields in a form using Yup and react-hook-form?

AMMENDE I am working on a form that utilizes Material UI, react-hook-form, and yup for validation purposes. This form includes three groups of radio buttons (for example: radio-g1, radio-g2, radio-g3), where the user is required to choose at least two op ...

reactjsmaterial-uiyupreact-hook-form

Guide on implementing ng-options and ng-init functionalities in AngularJS

I need help with displaying the ProjectID's in a drop-down list format where users can select one value. Can you provide an example on how to achieve this? [ { "ProjectManagerID": 4, "ProjectID": 4, "ResourceID": 4, "Deleted": false ...

htmlcssangularjsjsontwitter-bootstrap