Pass style to child component in material-ui-next - css

Question

hi :) lets say i have two components one who has the text "orange" as a const and I want its child to have orange text.. using material-ui-next, i'm using withStyles and anything else just doesn't affect the color of the text... here is some code:
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Card, { CardActions, CardContent } from 'material-ui/Card';
import Button from 'material-ui/Button';
import Typography from 'material-ui/Typography';
const styles = {
card: {
minWidth: 275,
},
bullet: {
display: 'inline-block',
margin: '0 2px',
transform: 'scale(0.8)',
},
title: {
marginBottom: 16,
fontSize: 14,
},
pos: {
marginBottom: 12,
},
};
function SimpleCard(props) {
const { classes } = props;
const bull = <span className={classes.bullet}>•</span>;
return (
<div>
<Card className={classes.card}>
<CardContent>
<Typography className={classes.title} color="textSecondary">
Word of the Day
</Typography>
<Typography variant="headline" component="h2">
be{bull}nev{bull}o{bull}lent
</Typography>
<Typography className={classes.pos} color="textSecondary">
adjective
</Typography>
<!-- I want the text from here to become orange-->
<Typography component="p">
well meaning and kindly.<br />
{'"a benevolent smile"'}
</Typography>
</CardContent>
<CardActions>
<Button size="small">Learn More</Button>
</CardActions>
</Card>
</div>
);
}
SimpleCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleCard);
orange will be at this.props.color
I don't mind it being the object orange from "material-ui/colors/orange" I just want to somehow address that value from within my SimpleCard component and use it when building the styles (or ignore styles all together and just use the color)