Обновить атрибут className - PullRequest
Новая
       7

Обновить атрибут className

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

Для аватара цвета я выбираю случайный цвет AKA -> rendomColor. 

render() {
    const { classes } = this.props;

    let colorArr = [classes.redAvatar, classes.greenAvatar, classes.blueAvatar, classes.redAvatar];

    const usersListedItems = this.state.ownersArr.map((owner, index) => {
        return (
            <Grid item xs={6} sm={3} key={owner.ownerId}>
                <UsersListedItems
                    ownerId={owner.ownerId}
                    userName={owner.userName}
                    avatarColor={colorArr[Math.floor(Math.random() * colorArr.length)]}>
                </UsersListedItems>
            </Grid>
        )

Как я могу обновить (в компоненте UsersListedItems) стиль карты borderColor таким же случайным цветом, который я рассчитал для аватара? 

const styles = (theme) => ({
root: {
    flexGrow: 1,
},
card: {
    borderRadius: '14px',
    border: '1px solid',
    borderColor: ????? 
},

  });

   ........

return (
        <Card className={classes.card}>
            <CardHeader
                avatar={
                    <Avatar id="av" aria-label="Recipe" className={this.props.avatarColor}>

Спасибо

1 Ответ

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

Могут быть и другие способы, но, по крайней мере, вы можете сделать это с помощью конкретных стилей: 

        <Card 
        className={classes.card}
        style={{
            borderColor: this.props.avatarColor
        }} >
        <CardHeader
            avatar={
                <Avatar id="av" aria-label="Recipe" className={this.props.avatarColor}>
...