带有 React 和 Material UI 的全局样式

Question

我是 React 和 Material 的新手，但我必须编写一个具有漂亮样式的企业应用程序。我想为我的应用程序使用某种全局样式（以便以后能够更改它）以及 react 中的功能组件（也许我稍后会添加 redux）。

具有反应和材料（最新版本）的全局样式的最佳实践方法是什么？

这个（ThemeProvider）怎么样：https ://material-ui.com/styles/advanced/ ？我阅读了 MuiThemeProvider，但在材料版本 4 文档中找不到它。它过时了吗？MuiThemeProvider 和 ThemeProvider 有什么区别？

多谢

- React（客户端渲染）和 Material（最新版​​本）后端：节点

Answer 1

在 Material UI v5 中，您可以使用GlobalStyles它来做到这一点。据我所知，GlobalStyles这只是情感成分的包装Global。用法非常简单：

import GlobalStyles from "@mui/material/GlobalStyles";

<GlobalStyles
  styles={{
    h1: { color: "red" },
    h2: { color: "green" },
    body: { backgroundColor: "lightpink" }
  }}
/>

请注意，您甚至不必将其放入其中ThemeProvider，如果未提供任何内容，则GlobalStyles使用defaultTheme：

return (
  <>
    <GlobalStyles
      styles={(theme) => ({
        h1: { color: theme.palette.primary.main },
        h2: { color: "green" },
        body: { backgroundColor: "lightpink" }
      })}
    />
    <h1>This is a h1 element</h1>
    <h2>This is a h2 element</h2>
  </>
);

现场演示

Answer 2

具有 Material UI 和 React 的全局样式

// 1. GlobalStyles.js
import { createStyles, makeStyles } from '@material-ui/core';

const useStyles = makeStyles(() =>
  createStyles({
    '@global': {
      html: {
        '-webkit-font-smoothing': 'antialiased',
        '-moz-osx-font-smoothing': 'grayscale',
        height: '100%',
        width: '100%'
      },
      '*, *::before, *::after': {
        boxSizing: 'inherit'
      },
      body: {
        height: '100%',
        width: '100%'
      },
      '#root': {
        height: '100%',
        width: '100%'
      }
    }
  })
);

const GlobalStyles = () => {
  useStyles();

  return null;
};

export default GlobalStyles;

** 然后在 App.js 中使用它，如下所示**

// 2. App.js
import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { Router } from 'react-router-dom';

import { NavBar, Routes, GlobalStyles, Routes } from '../';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: 'blue'
    }
  }
});

const App = () => {
  return (
    <MuiThemeProvider theme={theme}>
      <Router>
        <NavBar />
        <GlobalStyles />
        <Routes />
      </Router>
    </MuiThemeProvider>
  );
};

export default App;

这对我的反应项目有用。

Answer 3

您实际上可以使用 Material UI 编写全局样式：

const useStyles = makeStyles((theme) => ({
    '@global': {
        '.MuiPickersSlideTransition-transitionContainer.MuiPickersCalendarHeader-transitionContainer': {
            order: -1,
        },
        '.MuiTypography-root.MuiTypography-body1.MuiTypography-alignCenter': {
            fontWeight: 'bold',
        }
    }
}));

Answer 4

对于全局样式，您可以使用它，如下所示。这是对我来说最好的实现。

const theme = createMuiTheme({
  overrides: {
    MuiCssBaseline: {
      '@global': {
        html: {
          WebkitFontSmoothing: 'auto',
        },
      },
    },
  },
});

// ...
return (
  <ThemeProvider theme={theme}>
    <CssBaseline />
    {children}
  </ThemeProvider>
);

更多参考：全局CSS

Answer 5

根据我的经验，使用 MuiThemeProvider 和 createMuiTheme 效果非常好。但是，我使用的是 Material-UI 版本 3.9.2。

MuiThemeProvider 应该环绕您的整个应用程序。您在所有组件中需要做的就是传递一个传入主题的函数，而不是使用样式传递样式对象。

前任：

import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import {NavBar, Routes} from '../'
const theme = createMuiTheme({
  palette: {
    primary: {
      main: 'red'
    },
  },
/* whatever else you want to add here */
});

class App extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <NavBar />
        <Routes />
      </MuiThemeProvider>
    )
  }

然后在导航栏中说：

import React from 'react';
import { withStyles } from '@material-ui/core';
const styles = theme => ({
  root: {
    color: theme.palette.primary.main,,
  }
})

const NavBar = ({classes}) => {
  return <div className={classes.root}>navigation</div>
}

export default withStyles(styles)(NavBar);

希望有帮助，对我来说效果很好！