代码之家 › 专栏 › 技术社区 › Hasan Can Saral

无法使用Bootstrap 4.5.0设置$form反馈无效颜色

sass bootstrap-4 css

Hasan Can Saral · 技术社区 · 5 年前

我有以下全球 scss :

/* Importing Bootstrap SCSS file. */

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

...

$danger: darken($red, 15%);

$theme-colors: (
  "danger": $danger
);

...

$form-feedback-invalid-color: $danger;

...

我有以下几点 <form>

<form
  ngNoForm
  name="loginForm"
  action="/account/login"
  method="post"
  novalidate
>
  <div class="form-group">
    <label for="username">Email Address:</label>
    <input
      type="email"
      class="form-control form-control-sm"
      [class.is-invalid]="email.invalid && email.dirty"
      id="username"
      name="username"
      [(ngModel)]="username"
      tabindex="1"
      email
      required
      placeholder="Email Address"
      #usernameInput
      #email="ngModel"
    />
    <small class="help-block text-danger" *ngIf="email.invalid && email.dirty">
      A valid email address is required.
    </small>
  </div>
  ...
</form>

其呈现如下:

原来, $danger 是 $red 这是 #dc3545 如您所见,用户名的输入采用以下边框颜色 #dc3545 当它无效时:

然而,文本 text-danger 类是正确的颜色 #a71d2a .

在为无效输入的边框设置颜色时,我在做什么?

0 回复 | 直到 5 年前

Hasan Can Saral 5 年前

正在发生的事情是:

Bootstrap的 _variables.scss 这是:

// Form validation

...

$form-feedback-invalid-color:       theme-color("danger") !default;
$form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}' viewBox='0 0 12 12'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;

...

$form-validation-states: () !default;
$form-validation-states: map-merge(
  (

    ...

    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);

因此,要覆盖 $form-feedback-invalid-color ,我还需要覆盖 $form-validation-states 因为这就是Bootstrap读取它的地方。 Reference .