React: How to include some standard size to box - css

Question

I have been given some code which I do not fully understand. The project is hosted at: https://konekto.world/ and I am currently working on https://konekto.world/emergency_sent. I want the website to have a similar size in terms of size of textbox and padding as the one at https://konekto.world/. You can see the code below:
This is the screen I want to work on. As you can see I already wanted to apply style={padding} to the Grid but somehow this has no effect at all to the display.
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);
The code for the first screen (https://konekto.world/ ) to which I want to have a similar screen is this:
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);
Thank you very much for your help!

Answer 1

When using material ui, to modify styles you need to put them inside the styles object. Then inside the component you make the component's class name classes.something. So what if you notice the Grid component has a className of classes.container so all you need to do is to add the padding styles to container inside the style object like so
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);