title: Set <Avatar> backgroundColor randomly
body: <p>I have defined three backgroundColor in the style theme.</p>
  
  <pre><code>avatar: {
      backgroundColor: red[500],
  },
  orangeAvatar: {
      margin: 10,
      color: '#fff',
      backgroundColor: deepOrange[500],
  },
  purpleAvatar: {
      margin: 10,
      color: '#fff',
      backgroundColor: deepPurple[500],
  }, 
  </code></pre>
  
  <p>When ever the Avatar is loaded I would like to select one of them randomly.</p>
  
  <pre><code>&lt;Card&gt;
              &lt;CardHeader
                  avatar={
                      &lt;Avatar id="av" aria-label="Recipe"
                          className={classes.avatar}&gt;{this.props.userName.charAt(0).toLocaleUpperCase()}
                      &lt;/Avatar&gt;}
                  title={this.props.userName} disableTypography={true}/&gt;
              &lt;CardActionArea disabled={this.state.images.length == 1 ? true : false}&gt;
                  &lt;CardMedia
                      id={this.props.ownerId}
                      className={classes.media}
                      image={this.state.images[this.state.imageIndex]}
                      onClick={this.handleOnClick}
                  /&gt;
              &lt;/CardActionArea&gt;
          &lt;/Card&gt;
  </code></pre>
  
  <p>Any advice how to do this?</p>
  
  <p>Thank you</p>