将样式应用于Materialui组件

时间:2020-08-30 15:26:12

标签: javascript reactjs material-ui

`

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

我正在尝试将其他背景颜色应用于纸张api组件。当我运行代码时,它会生成相同的基本样式。

1 个答案:

答案 0 :(得分:0)

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

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