What is the best way to prioritize theme styles in Material UI over the inherited font CSS on a webpage?

I am in the process of developing a browser extension using React with MUI. This extension will be injected into the DOM of a specific page, which includes a CSS file that contains a rule targeting h6 elements:

h6 {
  font: inherit;
}

Despite explicitly setting a font weight for <h6> elements within my extension's DOM using Material UI theme configuration:

export const theme = createTheme({
  typography: {
    h6: {
      fontWeight: 800
    }       
  },        
});

An example demonstrating this issue can be found here: https://codesandbox.io/s/frosty-waterfall-5u2q7o?file=/src/App.js

What is the most effective approach to ensure that the rules set in the theme take precedence over the CSS rules from the page that affect my widget's DOM?

reactjsmaterial-ui

Answer №1

The theme styles for h6 tags do not have a global impact. To apply these styles, you must specifically utilize the Typography component.

Below is an updated version of your code:

import "./styles.css";

import { createTheme, ThemeProvider } from "@mui/material/styles";
import Typography from "@mui/material/Typography";

export const theme = createTheme({
  typography: {
    h6: {
      fontWeight: 800
    }
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <div className="App">
        <Typography variant="h6">This should be bold</Typography>
      </div>
    </ThemeProvider>
  );
}

https://codesandbox.io/s/theme-typography-styles-m2kwrn?fontsize=14&hidenavigation=1&theme=dark

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

The issue of Material UI breaking after a hard refresh in Next.js

Encountering an issue with a fresh nextjs application where Material UI has been configured Every time I perform a hard refresh on the page, the styling gets messed up and requires me to make modifications in each file to restore the previous style... Sh ...

reactjsmaterial-uinext.js

Having trouble integrating material-ui withStyles() with react-beautiful-dnd

I encountered the error and managed to replicate it in a mock environment. Here are the specific errors I am encountering: Locally: Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail. Check the render meth ...

reactjsmaterial-ui

Ways to address unusual actions from Next/Link when used within a button

I am encountering some issues with the next/link functionality in my application. There is a reusable component that displays a button, which is used twice on the page with different URLs each time. While the button works perfectly when the page is viewe ...

reactjsnext.jsnext-link

Preventing toggling collapse or expand functionality in a material-ui accordion

I am working with a MaterialUI accordion that contains some icons. I have noticed that when clicking on two specific icons, the accordion expands or collapses. However, I do not want this behavior. Instead, I want a different event to occur upon clicking t ...

reactjsmaterial-ui

Troubleshooting Problems with Deploying Next Js on Firebase

I am currently working on a new Next Js application and have successfully deployed it on Vercel by linking the GitLab project. Now, I need to deploy the same project on Firebase. Here's what I have tried so far: - Ran firebase init This command gen ...

javascriptreactjsfirebasenext.jsserver-side-rendering

Event listeners can only be removed within the useEffect hook

I have encountered an issue when trying to remove an event listener added inside the useEffect hook. The listener is set up to run once after the first rerender, thanks to the empty array passed as the second argument in the useEffect call. I attempted t ...

javascriptreactjsreact-hooks

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

I am encountering an issue where the width of the div remains the same after it has wrapped, causing overlapping. I want the first div to push the second to the right and so on. When I add a 100% width, it makes the width for the smallest div the same as ...

cssreactjsflexbox

Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page ...

javascriptcssreactjsmaterial-ui

Having trouble with installing Recharts through npm

When I try to install recharts using npm, I encounter the following error message in my console: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! ...

javascriptnode.jsreactjsnpmrecharts

Leveraging the ReactJS Hook useState for detecting Key press events

As I am in the process of constructing a piano, I want it to showcase certain CSS styles when the user "presses" specific keyboard buttons (via keydown event) - even enabling the simultaneous clicking of multiple different buttons. Once the user releases t ...

javascriptcssreactjs

Instructions for utilizing a variable or prop in a ternary operator

This element displays beautifully: const Footer = () => { let dataDiv = <div>Data is: Some data</div>; return ( <div> {data ? dataDiv : ''} </div> ) } However, when I replace the text "some data" w ...

reactjs

What is the process by which a web browser executes a ".jsx" file while in development?

As a beginner in the world of react, I have successfully been able to execute the dev and build tests. One question that has been boggling my mind is how browsers handle ".js" files. I know that when a project is build, the browser runs the &quo ...

javascriptreactjsnpmjsxvite

Background Design using React-Native SVG

I'm trying to incorporate an SVG background pattern in React-Native. My approach involved creating a Component using the 'react-native-svg' library, shown below: import React from "react"; import { SvgXml } from "react-native ...

reactjsreact-nativesvg

The page component constantly refreshes when attempting to create a dynamic layout

After implementing an app that utilizes react-router and Semantic UI React, a portion of the code can be viewed in this gist. The goal is to emulate this method (using Responsive component) to create a responsive layout for mobile and non-mobile devices. ...

reactjsreact-routerreact-router-domsemantic-ui-react

The upcoming construction of 'pages/404' page will not permit the use of getInitialProps or getServerSideProps, however, these methods are not already implemented in my code

Despite my efforts to search for a solution, I have not found anyone facing the same issue as me. When I execute next build, an error occurs stating that I cannot use getInitalProps/getServerSideProps, even though these methods are not used in my 404.tsx f ...

reactjstypescriptnext.js

Error encountered: Module not located when attempting to integrate @zeit/next-css into the project

I am encountering a module not found error every time I use yarn add @zeit/next-css. The specific error message reads: error - ./node_modules/@ant-design/icons/lib/components/AntdIcon.js:20:0 Module not found: Can't resolve 'classnames' In ...

reactjsnext.js

Display intricate state in ReactJS

I have designed a state with various types such as Checkbox, Slider, or Rating using Material-UI. I want to display these choices to the user. To better understand my implementation, I have created a sandbox: Sandbox. In line 261 of Form.js, I plan to out ...

reactjsnext.jsstate

What is the best way to retrieve cookies using getinitial props in Next.js?

Is there a way to retrieve cookies in getInitialProps and use them to fetch data from an API on a page in Next.js? ...

reactjsnext.js

Tips on how to perform a server-side redirection to a different page in a Nextjs application without refreshing the page while maintaining the URL

I am working on a [slug].js page where I need to fetch data from an API to display the destination page. export async function getServerSideProps({ query, res }) { const slug = query.slug; try { const destination = await RoutingAPI.matchSlu ...

javascriptreactjsnext.jsserver-side-rendering

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

I have developed a date picker that utilizes the Jalali calendar. While attempting to pass error checking using the error prop in the following code: <LocalizationProvider dateAdapter={AdapterJalali}> <MobileDatePicker label={lab ...

javascriptreactjsmaterial-uireact-datepicker