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

Question

例如，我想用类pageTitle添加flex我的h1

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模块显示的文档相同的过程

Answer 1

可能材质ui选择器"更强"。

材质ui提供了几种替代其样式的方法。

例如，使用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(，所以如果它是有效的，它可能会工作。