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

但是，当我将 withStyles 应用于结果时，不会出现任何其他样式。我以正确的方式接近这个吗？

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/

如果您有任何其他问题，请告诉我