Question

我目前正在尝试对函数的结果应用其他样式，该函数根据一组特定的道具的存在返回两个组件之一，例如：

4 4 4 4 4 4 4 3 
31 =  +4*7 +3*1 +2*0

但是，当我将withStyles应用于结果时，没有其他样式出现。我是否采用正确的方法？

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

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/

中发现了这一点

如果您还有其他疑问，请告诉我

可以在函数的结果上使用withStyles吗？

1 个答案: