reactjs - 在主要区域周围设置灰色背景

问题描述

我正在尝试使用材料 ui 来了解这个应用程序的外观：

目前，我的应用程序如下所示：

我需要做几件事。在关键字处理器文本周围放置某种框，在其下方的内容周围放置一个框，将中心区域框的背景颜色设置为白色，并将其余区域的背景区域设置为灰色。

任何想法如何修改下面的代码来做到这一点？

        <ThemeProvider theme={theme}>
       
        </ThemeProvider>

        <div>
          <ThemeProvider theme={theme}>
            <Container>
              {/* <Box bgcolor="primary.main"> */}
              <Grid container spacing={2}>
                {/* <Grid xs={12}>
              <AppBar />
              <br />
            </Grid> */}

                <Grid item xs={12}>
                  <Typography variant="h6" gutterBottom>
                    Keyword Processor
                  </Typography>
                  {/* <br /> */}
                </Grid>
                <Grid item xs={6}></Grid>
                <Grid item xs={6}>
                  <Box textAlign="right">
                    <Button
                      color="primary"
                      // mt={5}
                      onClick={this.inputToOutput}
                      //**********************
                    >
                      A-Z
                    </Button>
                  </Box>
                  {/* <Typography align="right">A-Z Frequency</Typography>{' '} */}
                </Grid>
                <Grid item xs={6}>
                  <TextField
                    label="Input Keywords"
                    fullWidth
                    multiline
                    rows={10}
                    variant="outlined"
                    margin="normal"
                    onChange={this.handleInputText}
                    defaultValue={defaultInputText}
                  />

                  <br />
                  <Button
                    variant="contained"
                    color="primary"
                    mt={5}
                    onClick={this.inputToOutput}
                    //**********************
                  >
                    Parse
                  </Button>
                  <Button
                    variant="contained"
                    color="secondary"
                    mt={5}
                    // onClick={this.parseInput}
                  >
                    Clear
                  </Button>

                  <br />
                  <br />
                  <Checkboxes
                    handleDedupe={this.handleDedupe}
                    handleRemoveNumbers={this.handleRemoveNumbers}
                    handleConvertToLowercase={this.handleConvertToLowercase}
                    handleOneWordPerLine={this.handleOneWordPerLine}
                    handleAddCommas={this.handleAddCommas}
                    handleAddCommasSpace={this.handleAddCommasSpace}
                  />
                </Grid>
                <Grid item xs={6}>
                  <TextField
                    label="Output Keywords"
                    fullWidth
                    multiline
                    rows={30}
                    variant="outlined"
                    margin="normal"
                    value={this.state.outputText}
                  />
                  <Button
                    variant="contained"
                    color="primary"
                    mt={5}
                    onClick={this.clearOutput}
                  >
                    Copy
                  </Button>
                  <Button
                    variant="contained"
                    color="secondary"
                    mt={5}
                    onClick={this.clearOutput}
                  >
                    Clear
                  </Button>
                </Grid>
                <Grid>
                  <br />
                  <br />
                </Grid>
              </Grid>
              {/* </Box> */}
            </Container>
          </ThemeProvider>
        </div>
      </>```

标签： reactjsmaterial-ui

你不需要做这一切，这是你可以做的。我相信theme您添加的ThemeProvider内容是自定义的，将主题文件pallete对象编辑为background颜色 iepaper和default，default颜色就是您所需要的。

这是我的：

import { createMuiTheme } from '@material-ui/core/styles';

// Main Material UI theme
const theme = createMuiTheme({
  palette: {
    background: {
      paper: '#fff',
      default: '#fafafa',
    },
  },
});

export default theme;

将“#fafafa”更改为您想要的颜色。

如果您没有创建自定义主题，只需复制我的然后将其导入您的ThemeProvider，它将更改您所有 html 页面中正文的背景。

reactjs - 在主要区域周围设置灰色背景

问题描述

解决方案

推荐阅读