reactjs - 当用户是管理员时，在评论模块中更改芯片（材料-UI）的不同背景颜色

Question

当用户是管理员时，我想在评论模块中更改芯片的背景颜色，就像在图片中一样，这就是我得到的

<Chip
    label={comment['user.firstname']}
    style={styles.chip}
/>

示例截图：

旧代码：

const styles = {
  root: {
    paddingTop: '25px',
    color: '#FFFFFF'
  },
  chip: {
    color: 'white',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: '40px',
    lineHeight: '32px',
    margin: '2px 15px',
    minWidth: '50px',
    backgroundColor: 'blue',
  },
  Button: {
    color: 'white',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: '40px',
    lineHeight: '32px',
    minWidth: '100px',
    backgroundColor: 'blue'
  }
}

标签： reactjsreact-reduxmaterial-ui

Answer 1

这是我的代码，想法是检查我的管理员用户的api，每个管理员用户都有一个与普通用户不同的颜色

import React from 'react';
import TimeAgo from 'react-timeago';
import PropTypes from 'prop-types';
import Card from 'components/commons/Card';
import Chip from '@material-ui/core/Chip';
import Button from '@material-ui/core/Button';
import { Grid  } from '@material-ui/core';
import { getUser } from 'api';


const styles = {
    root: {
    paddingTop: '25px',
    color: '#FFFFFF'
    },
    chip: {
    color: 'white',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: '40px',
    lineHeight: '32px',
    margin: '2px 15px',
    minWidth: '50px',
    backgroundColor: 'blue'
    },

    chipUserAdmin:{
    color: 'white',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: '40px',
    lineHeight: '32px',
    margin: '2px 15px',
    minWidth: '50px',
    backgroundColor:  getUser.id % 0 === 2 ? 'red':'blue' 

    },
    ChipUserNormal:{
    color: 'white',
    position: 'relative',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    height: '40px',
    lineHeight: '32px',
    margin: '2px 15px',
    minWidth: '50px',
    backgroundColor: 'gray'
    },

    Button: {
    fontWeight: 'bold',
    padding: '6%',
    paddingTop: '3%',
    paddingBottom: '3%',
    fontSize: '1rem',
    letterSpacing: '0px',
    textTransform: 'uppercase',
    borderRadius: '2.5px',
    textAlign: 'center'
    },
};

class Comment extends React.Component {

    state = {
    comment: '',
    };

    onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
    }

    renderComments(comments) {

    const commentDivs = comments.map(comment => {
        return (
        <div key={comment.id}>
            <div className="row">
            <div className="col comment">{comment.description}</div>
            </div>
            <div className="row">
            <div className="col-9">
                <TimeAgo className="time-ago" date={comment.createdAt} />
            </div>
            <div className="col-3">
                <div style={styles.wrapper}>
                <span className="time-ago">
                    <Chip
                    label={comment['user.firstname']}
                    style={{ backgroundColor: comment.id % 2 === 0 ? 'blue': 'red' || styles.chipUserAdmin }}
                    />
                </span>
                </div>
            </div>
            </div>
            <hr/>
        </div>
        )
    });
    return (
        <div>{commentDivs}</div>
    );
    }

    render() {
    return (
        <Card title="comments">
        <Grid item xs={12} md={12}>
            {this.renderComments(this.props.comments)}
            <div className="form-group">
            <textarea
                className="form-control"
                name="comment"
                placeholder="Write a comment"
                onChange={this.onChange}
                value={this.state.comment}
                rows="3"
            ></textarea>
            </div>
            <div className="form-group">
            <Button
                onClick={() => this.props.onSubmit(this.state.comment)}
                color="primary"
                variant="contained"
                size="large"
                style={styles.Button}>
                Send
                </Button>
            </div>
        </Grid>
        </Card>
    );
    }
}

Comment.propTypes = {
    comments: PropTypes.array.isRequired,
    onSubmit: PropTypes.func.isRequired,
};

export default Comment;

这是它的外观示例：