Условный scss или перезаписать переменные

Question

В состоянии реакции я передаю список, где и вызываю компонент, в котором я хочу

comments: {
                elementLabel: "Comments",
                elementType: 'textarea',
                className: "form-control",
                elementConfig: {
                    placeholder: "comments",
                    name: "comments",
                    id: "comments",
                       },
                value: '',
                rows: "5",
                cols: 5,
                form_value: "",
                validation: {
                },
                valid: false,
                touched: false,
                isChanged: true,
                errorMessage: "",
                changed: (event) => this.inputChangedHandler(event, "comments"),
                blured: (event) => this.inputBlurHandler(event, "comments")
            },

, если вызывается значение ниже, чем в классе, который я хочу установить

.form-control {
    height: 34px !important;
  } instead of this i want to set `80px`

полный класс scss будет найден здесь в style.scss Как мне этого добиться? Если я пытаюсь добавить новый класс, отображающий его с помощью div, который не вносит никаких изменений, он перезаписывает его обратно.

<div className="form-row mb-3">
                                <div className="col-md-12">
                                    <div className="ftm-form">
                                        <Input
                                        className="form-control-height"
                                            {...this.state.comments}
                                        />
                                    </div>
                                </div>
                            </div>

до изменений введите описание изображения здесь После ваших изменений введите описание изображения здесь

Answer 1

Прежде всего, в css вы должны описать свои классы как

.form-control {
    height: 34px;

    &.form-control-height {
      height: 80px;
    }
  }

И в коде реагирования вы перезаписываете свое className своим состоянием. Измените код следующим образом:

<div className="form-row mb-3">
  <div className="col-md-12">
    <Input {...this.state.comments} className="form-control form-control-height" />
  </div>