反应：如何在包装盒中放入一些标准尺寸

Question

我得到了一些我不完全理解的代码。该项目的托管地为：https://konekto.world/，而我目前正在研究https://konekto.world/emergency_sent。我希望网站在文本框和填充方面的大小与https://konekto.world/上的相似。您可以看到以下代码：

这是我要处理的屏幕。如您所见，我已经想将style = {padding}应用于网格，但是以某种方式对显示完全没有影响。

import React from 'react';
import axios from 'axios';
//import Box from '@material-ui/core/Box';
import { makeStyles, withStyles } from '@material-ui/core/styles';
//import { styled } from '@material-ui/styles';
import { Header } from '../Layout';
import { CANCELLED } from 'dns';
import { Grid, Container, Box, Typography, Button } from '@material-ui/core';
//import { styled } from '@material-ui/styles';
import CONSTANTS from '../utils/Constants';

const styles = theme => ({
  container: {
    alignItems: 'center',
    background: 'white',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '80px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  item: {
    //background: 'red',
    width: '80%',
    //background: 'white',
    'text-align': 'center',
    'border-radius': '5px',
    'margin-top': '10px'
  },
  label: {
    background: 'white'
  }
});

class EmergencySent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.classes = props.classes;
         }

  render() {
    var elementStyle = {
      padding: 2,
      textAlign: 'center',
      fontSize: '12px'
    };

    var buttonStyle = {
      padding: 10,
      textAlign: 'center',
      fontSize: '12px'
    };

    let location_display = null;
    if (this.state.location) {
      location_display = (
        <Typography>
          {this.state.location.longitude}, {this.state.location.latitude}
        </Typography>
      );
    }
    var padding = {
      padding: '20px',
      maxwidt: '200px'
    };

    /*
    deleted after you location... 
    (logitude, latitude):
              {location_display}
    */
    return (
      <React.Fragment>
        <Header />

        <Grid
          container
          className={this.classes.container}
          direction="column"
          spacing={2}
          style={padding}
        >
          <Grid item sm={12} className={this.classes.item} />
          <br />
          <h2> Emergency sent!</h2>
          <br />
          <Typography>
            Your location and personal information was transmitted. You will be contacted soon.
          </Typography>
          <br />
          <Button
            item
            className={this.classes.item}
            variant="contained"
            color="primary"
            onClick={this.onSpecify}
          >
            Specify Emergency
          </Button>
          <Typography>
            <br />
            Press the 'Specify Emergency'-button to enter details of your
            emergency situation and guide incoming help.
          </Typography>
          <br />
          <br />
          <br />
          <Button
            className={this.classes.item}
            item
            variant="contained"
            color="secondary"
            onClick={this.onCancel}
          >
            Cancel Emergency
          </Button>
          <br />
        </Grid>
      </React.Fragment>
    );
  }
}

export default withStyles(styles)(EmergencySent);

我想要具有类似屏幕的第一个屏幕（https://konekto.world/）的代码是：

import React from 'react';
import axios from 'axios';
import { Link as RouterLink } from 'react-router-dom';
import {
  Grid,
  Box,
  IconButton,
  Link,
  Typography,
  FormControl,
  FormLabel
} from '@material-ui/core';
import ArrowForward from '@material-ui/icons/ArrowForward';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import CONST from '../utils/Constants';
import CheckBoxGroup from './CheckBoxGroup';
import CheckBox from './CheckBox';
import SOSButton from './SOSButton';

const styles = theme => ({
  container: {
    alignItems: 'center',
    // background: 'white',
    border: 'black',
    'border-width': 'medium',
    'margin-top': '80px',
    background: 'rgba(255, 255, 255, 0.8)',
    'border-radius': '20px'
  },
  item: {
    // background: 'red',
    width: '100%',
    //background: 'white',
    'text-align': 'center',
    'border-radius': '5px',
    'margin-top': '10px'
  },
  label: {
    // background: 'white'
  }
  // forwardbutton: {
  //   'text-align': 'right'
  // }
});

class FormEmergencyType extends React.Component {
  //const classes = useStyles(); //React HOOK API => looks nice
  constructor(props) {
    super(props);
    //const { classes } = props;
    this.classes = props.classes;
    this.state = {}
  }

  render() {
    return (
      <Grid
        container
        className={this.classes.container}
        direction="column"
        spacing={2}
      >
        <Grid item sm={12} className={this.classes.item}>
          <Typography variant="h5">Who do you want to contact?</Typography>
          <CheckBoxGroup>
            <CheckBox
              title="Ambulance"
              onChange={this.handleChange}
              checked={this.state['ambulance']}
              value="ambulance"
            />
            <CheckBox
              title="Fire Service"
              onChange={this.handleChange}
              checked={this.state['fire_service']}
              value="fire_service"
            />
            <CheckBox
              title="Police"
              onChange={this.handleChange}
              checked={this.state['police']}
              value="police"
            />
            <CheckBox
              title="Car Service"
              onChange={this.handleChange}
              checked={this.state['car_service']}
              value="car_service"
            />
            <CheckBox
              title="Emergency Contacts"
              onChange={this.handleChange}
              checked={this.state['emergency_contacts']}
              value="emergency_contacts"
            />
          </CheckBoxGroup>
          <Grid />
          <Grid
            item
            sm={12}
            className={(this.classes.item, this.classes.forwardbutton)}
          >
            <SOSButton onSubmit={this.props.onSubmit} />
          </Grid>
        </Grid>
      </Grid>
    );
  }
}

export default withStyles(styles)(FormEmergencyType);

非常感谢您的帮助！

Answer 1

使用材质ui时，要修改样式，您需要将其放入样式对象中。然后，在组件内部创建组件的类名classes.something。因此，如果您注意到Grid组件的className为classes.container，那么您要做的就是像这样将填充样式添加到样式对象内部的容器中

import React from "react";
import axios from "axios";
//import Box from '@material-ui/core/Box';
import { makeStyles, withStyles } from "@material-ui/core/styles";
//import { styled } from '@material-ui/styles';
import { Header } from "../Layout";
import { CANCELLED } from "dns";
import { Grid, Container, Box, Typography, Button } from "@material-ui/core";
//import { styled } from '@material-ui/styles';
import CONSTANTS from "../utils/Constants";

const styles = theme => ({
  container: {
    alignItems: "center",
    background: "white",
    border: "black",
    "border-width": "medium",
    "margin-top": "80px",
    background: "rgba(255, 255, 255, 0.8)",
    "border-radius": "20px",
    padding: "20px",
    maxWidth: "200px"
  },
  item: {
    //background: 'red',
    width: "80%",
    //background: 'white',
    "text-align": "center",
    "border-radius": "5px",
    "margin-top": "10px"
  },
  label: {
    background: "white"
  }
});

class EmergencySent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};

  }

  render() {
    const { classes } = this.props;

    var elementStyle = {
      padding: 2,
      textAlign: "center",
      fontSize: "12px"
    };

    var buttonStyle = {
      padding: 10,
      textAlign: "center",
      fontSize: "12px"
    };

    let location_display = null;
    if (this.state.location) {
      location_display = (
        <Typography>
          {this.state.location.longitude}, {this.state.location.latitude}
        </Typography>
      );
    }
    var padding = {};

    /*
    deleted after you location... 
    (logitude, latitude):
              {location_display}
    */
    return (
      <React.Fragment>
        <Header />

        <Grid
          container
          className={classes.container}
          direction="column"
          spacing={2}
        >
          <Grid item sm={12} className={classes.item} />
          <br />
          <h2> Emergency sent!</h2>
          <br />
          <Typography>
            Your location and personal information was transmitted. You will be
            contacted soon.
          </Typography>
          <br />
          <Button
            item
            className={classes.item}
            variant="contained"
            color="primary"
            onClick={this.onSpecify}
          >
            Specify Emergency
          </Button>
          <Typography>
            <br />
            Press the 'Specify Emergency'-button to enter details of your
            emergency situation and guide incoming help.
          </Typography>
          <br />
          <br />
          <br />
          <Button
            className={classes.item}
            item
            variant="contained"
            color="secondary"
            onClick={this.onCancel}
          >
            Cancel Emergency
          </Button>
          <br />
        </Grid>
      </React.Fragment>
    );
  }
}
export default withStyles(styles)(EmergencySent);