在Create React App+TypeScript中如何用CSS Modules覆盖Material-UI样式？

嘿，用TypeScript + Material UI + CSS Modules的方式给元素加样式是完全没问题的，你的样式没生效主要是几个小细节没处理对，我帮你梳理下：

1. CSS属性写错了，边框根本不会渲染 #

你在.pageTitle里写的border-top: 10px;是无效的——border-top必须同时指定宽度、样式（比如solid/dashed），缺了样式的话浏览器根本不会显示边框。改成这样就对了：

.pageTitle {
  display: flex;
  border-top: 10px solid #333; /* 这里补了样式和颜色，颜色你可以自己调整 */
}

2. 组件结构冗余，可能导致样式被覆盖 #

你在Typography里面嵌套原生h1的写法不太符合Material UI的最佳实践：Typography默认会渲染成<p>标签，嵌套h1不仅语义化不好，还可能让AppBar或Typography的默认内联样式覆盖你的CSS Modules样式。

换个更规范的写法，直接用Typography的variant属性生成h1级别的标题，再绑定你的CSS类：

import AppBar from '@material-ui/core/AppBar';
import Typography from '@material-ui/core/Typography';
// TypeScript里用import引入CSS Modules比require更规范，类型也更安全
import styles from './Header.module.css';

const Header = () => {
  return (
    <div className={styles.header}>
      <AppBar>
        <Typography variant="h1" className={styles.pageTitle}>HELLO</Typography>
      </AppBar>
    </div>
  );
};

export default Header;

3. 确认TypeScript对CSS Modules的支持（可选但推荐） #

如果你的项目还没配置CSS Modules的类型提示，可以在项目根目录加个declarations.d.ts文件，这样TypeScript能识别CSS类名：

declare module '*.module.css' {
  const classes: { [key: string]: string };
  export default classes;
}

另外，你可以打开浏览器开发者工具，选中标题元素查看Styles面板——如果你的.pageTitle类已经被应用，但样式被划掉了，那就是被Material UI的内联样式覆盖了，这种情况可以临时用!important测试（但不推荐长期使用，最好还是调整组件结构或者样式优先级）。

内容的提问来源于stack exchange，提问作者awfuldev2020