Reactjs 设置<；阿凡达>；背景色随机

我在风格主题中定义了三种背景色

avatar: {
    backgroundColor: red[500],
},
orangeAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: deepOrange[500],
},
purpleAvatar: {
    margin: 10,
    color: '#fff',
    backgroundColor: deepPurple[500],
}, 

当化身加载时，我想随机选择其中一个

<Card>
            <CardHeader
                avatar={
                    <Avatar id="av" aria-label="Recipe"
                        className={classes.avatar}>{this.props.userName.charAt(0).toLocaleUpperCase()}
                    </Avatar>}
                title={this.props.userName} disableTypography={true}/>
            <CardActionArea disabled={this.state.images.length == 1 ? true : false}>
                <CardMedia
                    id={this.props.ownerId}
                    className={classes.media}
                    image={this.state.images[this.state.imageIndex]}
                    onClick={this.handleOnClick}
                />
            </CardActionArea>
        </Card>

有什么建议吗

---

谢谢

有几种方法可以满足您的需求。我的建议是：将3个类放在一个数组中，每次选择一个介于0和2之间的随机数，并指定该类名：

---

有几种方法可以满足您的需求。我的建议是：将3个类放在一个数组中，每次选择一个介于0和2之间的随机数，并指定该类名：

让classNameHolder=[“阿凡达”、“橙黄之星”、“紫罗兰之星”]；

让classNameHolder=[“阿凡达”、“橙黄之星”、“紫罗兰之星”]；

我也有同样的需求，也许这个解决方案也可以为您服务，有一个函数可以随机生成颜色，然后从在线样式调用该函数

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    large: {
      fontSize: "2.5rem",
      width: 100,
      height: 100
    }
  })
);

function randomColor() {
  let hex = Math.floor(Math.random() * 0xFFFFFF);
  let color = "#" + hex.toString(16);

  return color;
}

返回(

我也有同样的需求，也许这个解决方案也可以为您服务，有一个函数可以随机生成颜色，然后从在线样式调用该函数

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    large: {
      fontSize: "2.5rem",
      width: 100,
      height: 100
    }
  })
);

function randomColor() {
  let hex = Math.floor(Math.random() * 0xFFFFFF);
  let color = "#" + hex.toString(16);

  return color;
}


返回(

这是完美的->{Math.floor（Math.random（）*classNameHolder.length}这是完美的->{Math.floor（Math.random（）*classNameHolder.length}
  return (
    <Avatar
      variant="square"
      src={imageSrc}
      alt={alt}
      className={classes.large}
      style={{
        backgroundColor: randomColor()
      }}
    />
  )