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

Question

例如我想用 class 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

可能 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）所以也许如果它是有效的，它正在工作。

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

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

css

typescript

reactjs

css-modules