Wsrtjtyk

I'm currently trying to apply additional styling to the result of a function that returns one of two components depending on the presence of a specific set of props, as such:

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 />

}

However, when I apply withStyles to the result, none of the additional styling appears. Am I approaching this the right way?

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} />

...

  )

}

try this way

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 styles = {

  default: {

    backgroundColor: 'rgba(255, 255, 255, 0.5)',

    width: '40px',

    height: '40px',

    borderRadius: '50%'

  }

}



function UserAvatar(props) {

  const { classes, userImage } = props;

  return userImage ? <Avatar src={userImage} /> : <AccountCircle className={classes.default} />

}



export default withStyles(styles)(UserAvatar)

I found this from the documentation: https://material-ui.com/style/icons/

please let me know if you have any further questions