Currently, I am attempting to add extra styling to the output of a function that returns one of two components based on specific props. Here is an example:
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Avatar from '@material-ui/core/Avatar'
import AccountCircle from '@material-ui/icons/AccountCircle'
const DefaultImage = withStyles({
root: {
backgroundColor: 'rgba(255, 255, 255, 0.5)',
width: '40px',
height: '40px',
borderRadius: '50%'
}
})(AccountCircle)
export default function UserAvatar(props) {
return props.userImage ? <Avatar src={props.userImage} /> : <DefaultImage />
}
Despite this setup, when trying to style the result using withStyles, the additional styles do not display. Is my approach correct in this situation?
import React from 'react'
import UserAvatar from './avatar.js'
import { withStyles } from '@material-ui/core/styles'
const UserAvatarHeader = withStyles({
root: {
margin: '2vh',
float: 'right'
}
})(UserAvatar)
export default function PageHeader(props) {
return (
...
<UserAvatarHeader userImage={props.userImage} />
...
)
}