当ReactDOM从js函数渲染时，material-ui对象被破坏

Question

我正在用React.js和Material-ui制作一个.NET MVC项目。当我设置像这样的React类时：

class NoteContent extends React.Component {
    render() {
        return (
            <Card style={styles.card}>
                <CardMedia
                    style={styles.media}
                    image="https://is4-ssl.mzstatic.com/image/thumb/Purple125/v4/4c/27/2d/4c272d47-f61f-8e0a-5c0e-e5e8cd5a756e/BOEAppIcon-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-5.png/230x0w.jpg"
                    title="Contemplative Reptile"
                />
                <CardContent>
                    <Typography gutterBottom variant="headline" component="h2">
                        Lizard
                        </Typography>
                    <Typography component="p">
                        {this.props.body}
                    </Typography>
                </CardContent>
                <CardActions>
                    <Button size="small" color="primary">
                        Share
                        </Button>
                    <Button size="small" color="primary">
                        Learn More
                        </Button>
                </CardActions>
            </Card>

        );
    }
}

，然后在项目加载后立即呈现它：

ReactDOM.render(
        <NoteContent body="f88ea1e709cf4d6891" />,
        document.getElementById('AppBarContent')
    );

这有效。我正在将Google Drive API用于javascript，因此我假设使用XHR可以使用一些javascript函数。因此，每当我从JavaScript函数使用ReactDOM.render时，所有CSS都会损坏。 <CardMedia>中的图像什至不显示。

我对React和Material-UI很陌生，所以我可能缺少一些非常明显的东西。我是对的还是错过了什么？