I wrote code for the following two websites: https://konekto.world/ (FormEmergencyType) https://konekto.world/emergency_details (AffectedState). However, I want both files to look similar and like the which they do not yet. Below you can see both function definitions: File ”AffectedState.js”
import React from 'react';
import axios from 'axios';
import { Link as RouterLink } from 'react-router-dom';
import { Grid, Box, IconButton, Link, Typography } 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 RadioButtonGroup from '../SOS/RadioButtonGroup';
import RadioButton from '../SOS/RadioButton';
const styles = makeStyles(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'
// }
}));
export default function AffectedState(props) {
const classes = styles; //React HOOK API => looks nice
return (
<Grid
container
className={classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={classes.item}>
<Typography variant="h5">What happened?</Typography>
{/* <Box className={classes.label}>A</Box> */}
</Grid>
<Grid item sm={12} className={classes.item}>
<RadioButtonGroup>
<RadioButton name="AffectedState" value="1" label="Cannot move" />
<RadioButton
name="AffectedState"
value="2"
label="Intensive bleeding"
/>
<RadioButton name="AffectedState" value="3" label="Life at stake" />
<RadioButton name="AffectedState" value="4" label="Frostbite" />
</RadioButtonGroup>
<Grid />
<Grid item sm={12} className={(classes.item, classes.forwardbutton)}>
<Link component={RouterLink} to="/summary_page" no-underline>
<IconButton
//onSubmit={this.props.onSubmit}
edge="start"
// className={classes.forwardbutton}
color="black"
//TODO can we change color and move it to right?
>
<ArrowForward />
</IconButton>
</Link>
</Grid>
</Grid>
</Grid>
);
}
File ”FormEmergencyType.js”
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 = {
ambulance: props.emergencyTypes.ambulance,
fire_service: props.emergencyTypes.fire_service,
car_service: props.emergencyTypes.car_service,
police: props.emergencyTypes.police,
emergency_contacts: props.emergencyTypes.emergency_contacts
};
this.handleChange = this.handleChange.bind(this);
//console.log(this.state);
}
handleChange(event, checked) {
//let new_state = { emergencytype: this.state };
let new_state = this.state;
// console.log(event.target.value);
// console.log(checked);
switch (event.target.value) {
case 'ambulance':
// new_state['emergencytype']['ambulance'] = checked;
new_state['ambulance'] = checked;
break;
case 'fire_service':
// new_state['emergencytype']['fire_service'] = checked;
new_state['fire_service'] = checked;
break;
case 'police':
// new_state['emergencytype']['police'] = checked;
new_state['police'] = checked;
break;
case 'car_service':
// new_state['emergencytype']['car_service'] = checked;
new_state['car_service'] = checked;
break;
case 'emergency_contacts':
// new_state['emergencytype']['car_service'] = checked;
new_state['emergency_contacts'] = checked;
break;
default:
break;
}
//this.setState(new_state.emergencytype);
this.setState(new_state);
// console.log(this.state);
this.props.handleEmergencyType(new_state);
}
render() {
return (
<Grid
container
className={this.classes.container}
direction="column"
spacing={2}
>
<Grid item sm={12} className={this.classes.item}>
<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);
I have already tried changing the affected state component to a class but this also does not work. I would appreciate your help.
I don't understand the question in the title, but for the aspect part, I believe that you are not sending the style props correctly. I checked in the inspector and the second component doesn't have access to the styles you wrote in your css-in-js.
Try checking if you are sending/receiving the props correctly or try accessing them directly by:
className={this.props.classes.container}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.