如何使用 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

可能 material-ui 選擇器“更強” 。

Material-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 ）所以也許如果它有效，它正在工作。