Pass multiple props to component in react-materialui - reactjs

Question

I'm trying to pass the styles and text to the reactjs component using PropTypes, but I'm getting the error that TypeError: Cannot read property 'header' of undefined and its point the error to {typo.header}
Unable to pass 2 different props into react component. I'm sure I'm not passing the props correctly, I'm learning reactjs and not sure how to do this correctly. Can some guide me how to do this.
App.js:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Typography from 'material-ui/Typography';
import './App.css';
import { AppStyle } from "./AppStyle";
import { Typos } from "./AppTypo";
function SurveyApp(props) {
const { classes, typo } = props;
return (
<div className={classes.wrapper}>
<div className={classes._header}>
</div>
<div className={classes._body}>
<div className={classes.__formContainer}>
<Card className={classes.card}>
<CardContent>
<Typography>
{typo.header}
</Typography>
<Typography>
</Typography>
</CardContent>
</Card>
</div>
</div>
</div>
);
}
SurveyApp.propTypes = {
classes: PropTypes.object.isRequired,
typo: PropTypes.object.isRequired
}
export default withStyles(AppStyle, Typos)(SurveyApp);
AppStyle.js:
export const AppStyle = {
wrapper: {
width: '100%',
height: '100%',
position: 'relative'
},
_header: {
width: '100%',
height: 100,
backgroundColor: '#295e94',
position: 'relative'
},
_body: {
width: '100%;',
height: 'auto',
minHeight: 'calc(100% - 100px)',
position: 'relative',
display: 'flex',
flexDirection: 'row',
alignContent: 'center',
alignItems: 'start',
justifyContent: 'center'
},
__formContainer: {
width: 750,
position: 'absolute',
top: -30
},
'#media (max-width: 480px)': {
__formContainer: {
width: '100%',
position: 'absolute',
top: -30
}
}
}
AppTypo.js:
export const Typos = {
header: "User Experience",
subHeader: "This is intended to improve your experience."
}

Answer 1

You're not providing the props correctly.
export default withStyles(AppStyle, Typos)(SurveyApp);
Does not do what you think it does with Typos.
Besides that, you have two different definitions for header: header and _header. The style you pass via withStyles is _header, from AppStyle. That's the one you should use.
You should not try to pass non-style information via withStyles, which is what it looks like you're trying to do with Typos. Those need to come in from the parent component, or since this is the parent, just use the imported Typos.header.
I recommend you read more on props in general to get a better idea of what they are for an how to use them.
In the future, you may find using React's Context is better for handling styles.