将样式应用于材质 ui 组件

Question

`

import React, { Component } from 'react';
import Header from './Components/UI/header';
import { Box, Paper } from '@material-ui/core';
import { ThemeProvider, withStyles} from '@material-ui/core/styles';


const styles = () => ({
  overrides: {
    'MuiPaper-root': {
      root: {
        backgroundColor: '#345f',
      }

    }
  }
});





export class App extends Component {
  render() {
    const classes = this.props;
    return(<ThemeProvider theme={theme}>
      <Paper classes={classes.overrides}>
          <Box display="flex" justifyContent="center" alignItems="center" height={1}>
            <Header />
          </Box>
      </Paper>
    </ThemeProvider>);
  }
}


export default withStyles(styles)(App);

`project img link

我正在尝试对 paper api 组件应用不同的背景颜色。当我运行代码时，它会生成相同的基本样式。

Answer 1

您无需担心 MUI 生成的样式或根目录。这将设置您本地的<Paper /> 组件的背景

const styles = () => ({
  overrides: {
     backgroundColor: '#345f',
  }
});