Question

对于avatarColor，我选择了一种随机颜色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}>

谢谢

Answer 1

也许还有其他方法，但是至少您可以通过特定的样式来做到：

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

更新className属性

1 个答案: