Измените другой цвет фона чипа (пользовательский интерфейс материала) в модуле комментариев, когда пользователь является администратором - PullRequest
Новая
       9

Измените другой цвет фона чипа (пользовательский интерфейс материала) в модуле комментариев, когда пользователь является администратором

1 голос
/ 17 июня 2019

Я хотел бы изменить цвет фона Chip, когда пользователь является администратором, в модуле комментариев, как на картинке, это то, что я получаю 

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

код заказа

пример

Ответы [ 2 ]

0 голосов
/ 26 июня 2019

это выглядит так это мой код, идея проверяет мой 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;`
0 голосов
/ 17 июня 2019

Вы можете добавить различные имена классов на основе данных.См. Codesandbox - https://codesandbox.io/s/material-demo-i8k5h

>  <Chip
>             key={data.key}
>             icon={icon}
>             label={data.label}
>             onDelete={handleDelete(data)}
>             className={
>               data.label === "React" ? classes.reactChip : classes.chip
>             }
>           />

Здесь я применяю разные имена классов в зависимости от того, является ли метка «реагировать» или нет.Вы можете применить ту же логику к вашему коду.

Добавление дополнительных предложений на основе нового кода: 

   backgroundColor:  getUser.id % 0 === 2 ? 'red':'blue'

Указанный выше код неверен, так как он всегда возвращает синий цвет.(любое число% 0 всегда равно NaN).Я думаю, это должно быть проблемой в вашем коде.Пожалуйста, исправьте и дайте мне знать, если это работает.

Дальнейшее редактирование на основе дополнительной информации:

Код Песочница - https://codesandbox.io/s/material-demo-5oo5f

Я создал коды и ящик, имитирующие ваши требования.Я использую файл JS, который содержит пользовательские данные.Я дал логику для установки цвета чипа на основе имени пользователя, а также прокомментировал логику для установки цвета чипа для каждого альтернативного пользователя (user.id% 2 === 0).Надеюсь, это поможет.

...