有条件的scss或覆盖变量答案

【问题标题】：Conditional scss or overwrite the varialbles有条件的scss或覆盖变量
【发布时间】：2020-02-17 08:11:05
【问题描述】：

在反应状态下，我正在传递一个列表，在哪里并在我想要的地方调用组件

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>

更改前enter image description here 在你的 chages enter image description here

【问题讨论】：

首先最好不要定义固定高度。而且你不应该在这里使用重要的。但是这样做，如果您想要不同的样式，只需设置不同的类。在你的CSS中你设置.form-control.my-super-class { height: 80px !important; }
用您建议的更改更新了问题
现在看来这是一个一般性的 CSS 问题，并没有解决您最初的问题。您可以更新 CSS 或 HTML，具体取决于外观。或者，如果您无法自行解决此问题，请打开一个新问题。但看起来您现在可以根据应用的状态设置高度。

标签： javascript css reactjs sass bootstrap-4

【解决方案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>

【讨论】：

同样的问题，请检查问题更新了屏幕截图