How can I make theme styles in Material UI override a page-level font inherit CSS

I'm writing a browser extension using React+MUI, which will get injected into the DOM of a page. That page contains a CSS file with a rule that does the following:

h6 {
  font: inherit;
}

When I put a <h6> element in my extension's DOM, it is not bolded, even though I'm explicitly setting a font weight using a Material UI theme:

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

Here's a working example showing the problem: https://codesandbox.io/s/frosty-waterfall-5u2q7o?file=/src/App.js

What's the best way for getting the rules in the theme to have precedence over page-level CSS rules that bleed into my widget's DOM?

The theme styles don't have any global impact on h6 tags. You need to explicitly use the Typography component in order for those theme styles to have an impact.

Here's a modified 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>
  );
}