Можно ли использовать withStyles для результата функции?

Question

В настоящее время я пытаюсь применить дополнительный стиль к результату функции, которая возвращает один из двух компонентов в зависимости от наличия определенного набора реквизитов, как такового:

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

Однако, когда я применяю стили к результату, ни один из дополнительных стилей не появляется. Правильно ли я подхожу к этому?

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

Answer 1

попробуйте так

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)

Я нашел это из документации: https://material -ui.com / style / icons /

Пожалуйста, дайте мне знать, если у вас есть дополнительные вопросы