Как переопределить Material-UI с модулями css в create-реагировать-app и Typescript? - PullRequest
Новая
       24

Как переопределить Material-UI с модулями css в create-реагировать-app и Typescript?

1 голос
/ 09 марта 2020

Например, я хочу добавить 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>

В моем заголовочном файле. css file 

.pageTitle {
   display: flex;
   border-top: 10px;
}

Возможно ли это сделать? Потому что это ничего не меняет с моей стороны, снова используя Typescript, но следуя тому же процессу, что и документы, которые пользовательский интерфейс Material показывает для css modules

1 Ответ

1 голос
/ 09 марта 2020

Вероятно, селекторы материалов-пользовательского интерфейса "сильнее" .

Материал-пользовательский интерфейс предоставляет несколько способов переопределить их стили.

Например, , используйте 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), поэтому, возможно, если он был действительным, он работал

...