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

awfuldev2020

例如,我想添加flex我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模块显示的文档相同的过程

莫什·费

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,您borderTop在一个无效的css文件中设置了它(应该是border-top),所以也许它是有效的,它正在工作。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

我可以在create-react-app v2中使用CSS模块覆盖Material-UI吗?

如何在Create React App中使用CSS模块覆盖Bootstrap样式

如何在create-react-app中使用CSS模块?

如何在不使用create-react-app的情况下使用Material-UI

如何在React中使用Material-UI覆盖react-data-grid样式

如何在React中覆盖material-ui-next CSS?

如何在create-react-app中使用Sass和CSS模块?

语义UI React:如何在create-react-app项目中使用较少的变量作为主题

如何在React中使用Material UI图标?

如何在React中使用Material UI组件

如何在Material-ui 4,React 16.8,TypeScript 3.5中使用Refs

如何在Flask后端使用React和material-ui?

如何在React + Material-UI项目中使用CSS?

如何在React中使用Material-ui将内联样式更改为CSS?

如何为Material-UI React组件覆盖@media CSS

在 React 项目中使用 Material ui 和 Tailwind css

如何使用create-react-app正确配置material-ui以进行测试?

在 React App 中使用 Material-UI 或 Semantic UI

如何在Meteor环境中使用React,Material UI和Styled-components管理服务器端渲染?

如何在React JS中使用jQuery UI

如何获得最简单的Material UI Select以与React和Typescript一起使用?

如何在React中使用Material UI设置全局字体颜色

如何在 React material-ui 中使用地图内的网格

如何在 react-hook-from 中使用 material-ui 自动完成功能

如何在Material-UI对话框模态中使用react-infinite-scroll-component?

如何在React Hook表单中使用Material-UI Select

试图从React Material Ui覆盖AppBar的css,

如何在 create-react-app 中使用 scss 文件?

如何在Create React App中使用Scss变量?