How do I override Material-UI with css modules in create-react-app and Typescript?

Question

For example I want to add flex my h1 with class pageTitle

import AppBar from '@material-ui/core/AppBar';
const styles = require('./Header.module.css');

<div className={styles.header}>
   <AppBar>
      <Typography>
         <h1 className={styles.pageTitle}>HELLO</h1>
      </Typography>
   </AppBar>
</div>

In my Header.module.css file

.pageTitle {
   display: flex;
   border-top: 10px;
}

Is this possible to do? Because its not changing anything on my end, again using Typescript, but following the same process as the docs that Material UI shows for css modules

Answer 1

Probably material-ui selectors are "stronger".

Material-ui supply several ways to override their styles.

For example, use classes. In your case:

import React from "react";
import ReactDOM from "react-dom";
import { makeStyles } from '@material-ui/core/styles';
import AppBar from "@material-ui/core/AppBar";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles({
  root: {
    display: 'flex',
    borderTop: '10px solid orange'
  }
});

function App() {
  const classes = useStyles();
  return (
    <AppBar classes={classes}>
      <Typography>
          <h1>HELLO</h1>
      </Typography>
    </AppBar>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

https://codesandbox.io/s/material-ui-override-styles-classes-v8nhl

BTW, <AppBar /> already has display: flex and you set borderTop in a css file which is invalid (it should be border-top) so maybe if it was valid, it was working.