Установите <Avatar>backgroundColor случайно - PullRequest
Новая
       8

Установите <Avatar>backgroundColor случайно

0 голосов
/ 19 марта 2019

Я определил три backgroundColor в теме стиля. 

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>

Любой совет, каксделать это?

Спасибо

Ответы [ 2 ]

1 голос
/ 19 марта 2019

Несколько способов сделать то, что вы хотите.Мое предложение: поместите 3 класса в массив, выберите случайное число от 0 до 2 каждый раз и присвойте этому имени класса:

<Avatar className={classes[Math.floor(Math.random() * 3)]}.../>

0 голосов
/ 19 марта 2019 
let classNameHolder = ["avatar","orangeAvatar","purpleAvatar"];
<Card>
            <CardHeader
                avatar={
                    <Avatar id="av" aria-label="Recipe"
                        className={classNameHolder[Math.floor(Math.random() * 3)]}>{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>
...