Question

我是React和Material的新手，但是我必须编写一个样式美观的企业应用程序。我想为我的应用程序使用某种全局样式（以便以后可以对其进行更改）中的功能组件（可能稍后再添加redux）。

使用React和Material（最新版本）的全局样式的最佳实践方法是什么？

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

非常感谢

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

Answer 1

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

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

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;

这适用于我的 React 项目。

Answer 3

以我的经验，使用MuiThemeProvider和createMuiTheme效果很好。但是，我正在使用Matarial-UI 3.9.2版。

MuiThemeProvider应该包裹整个应用程序。您需要在所有组件中做的就是传递一个传递主题的函数，而不是将styles对象传递给styles。

例如：

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);

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

Answer 4

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

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

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

更多参考：Global CSS

具有React和Material UI的全局样式

4 个答案: