如何在 create-react-app 和 Typescript 中使用 css 模块覆盖 Material-UI？答案

【问题标题】：How do I override Material-UI with css modules in create-react-app and Typescript?如何在 create-react-app 和 Typescript 中使用 css 模块覆盖 Material-UI？
【发布时间】：2020-06-21 12:52:21
【问题描述】：

例如，我想将 h1 添加到 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>

在我的 Header.module.css 文件中

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

这可能吗？因为它并没有改变我的任何东西，再次使用 Typescript，但遵循与 Material UI 为 css 模块显示的文档相同的过程

【问题讨论】：

标签： css reactjs typescript css-modules

【解决方案1】：

可能 material-ui 选择器是"stronger"。

Material-ui 提供了几种方法来override 他们的样式。

例如，使用classes。在你的情况下：

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

顺便说一句，<AppBar /> 已经有 display: flex 并且您在一个无效的 css 文件中设置了 borderTop（它应该是 border-top）所以也许如果它是有效的，它就可以工作。

【讨论】：