如何更改本地 home.scss 文件中具体化输入字段的文本颜色答案

【问题标题】：How to change the text colour of a materialize input field within local home.scss file如何更改本地 home.scss 文件中具体化输入字段的文本颜色
【发布时间】：2020-02-11 01:03:04
【问题描述】：

框架：在轨道上做出反应 CSS：物化

所以我使用 materialize 的默认 css 包并将其导入为：

  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css">

<body>底部有脚本：

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>

以下是我要定位的元素：

<div className="input-field">
  <textarea ref="ideaTextArea" className="materialize-textarea" />
  <label>Trading Ideas: with TradeDesk</label>
  <button type="submit" className="btn right blue">Share</button>
</div>

这是我添加的 CSS，用于定位我想要更改 home.scss 下的 app/assets/stylesheets 目录的元素：

.input-field textarea:focus + label {
  color: #2196f3;
}

.row .input-field textarea:focus {
  border-bottom: 1px solid #2196f3;
  box-shadow: 0 1px 0 0 #2196f3;
}

但是，这仍然是渲染默认的物化绿颜色：

render

有人知道如何将输入字段的文本颜色更改为 #2196f3 吗？我的 CSS 尝试正确吗？我将如何在本地存储具体化，这是实现我想要的 css 更改的更简单的方法吗？

【问题讨论】：

标签： html css reactjs materialize

【解决方案1】：

所以我发现@ether 的答案几乎是实现这一目标的正确方法。我发现，

.input-field textarea:focus + label {
  color: #2196f3 !important;
}

.row .input-field textarea:focus {
  border-bottom: 1px solid #2196f3 !important;
  box-shadow: 0 1px 0 0 #2196f3 !important
}

也有效。很明显！用本地值覆盖导入的 materialize.css 文件很重要 - 这很好，因为它可以让您的本地 css 更容易处理，只针对特定元素。

【讨论】：

【解决方案2】：

如果我没记错的话，你应该可以定位你的textarea。

看看这个：JSFiddle

textarea {
color:#2196f3;
}

【讨论】：

【解决方案3】：

我们都知道!important 是懒惰的，应该避免（如果可能的话）：

使用 !important 声明通常被认为是不好的做法因为它具有与 CSS 核心之一混淆的副作用机制：特异性。在许多情况下，使用它可能表示差 CSS 架构。

在某些情况下，它是可以容忍的，甚至是首选的，但要让确保您仔细检查其中一种情况是否确实适用于您的使用前的情况。

更好的解决方案首先要了解materializecss 如何构建它的样式表，一旦你这样做了，使用每个项目特定的SASS 创建一个自定义构建，以便你引用的默认样式表包含你喜欢的颜色。无需重写。

下载sass version 将使您能够完全控制要包含的组件以及默认情况下它们应具有的属性。在 sass 文件夹中，您会找到 _variables.scss，这是框架的默认属性所在的位置。就像更改这些变量然后重新编译 materialize.scss 一样简单。

在 _input-fields.scss 中，我们可以看到在第 54-58 行引用了一个名为 $input-focus-color 的变量：

// Focused input style
  &:focus:not([readonly]) {
    border-bottom: 1px solid $input-focus-color;
    box-shadow: 0 1px 0 0 $input-focus-color;
  }

回到 variables.scss，第 10 节（表单），在第 172 行，我们看到 $input-focus-color 引用了另一种颜色，$secondary-color：

$input-focus-color: $secondary-color !default;

就在 variables.scss 的开头布置了主题颜色，几乎所有其他元素颜色都来自这些规则：

// 1. Colors
// ==========================================================================

$primary-color: color("materialize-red", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;

$secondary-color: color("teal", "lighten-1") !default;
$success-color: color("green", "base") !default;
$error-color: color("red", "base") !default;
$link-color: color("light-blue", "darken-1") !default;

因此，简而言之，更改 $secondary-color 会得到您正在寻找的更改 - 但它也会更改所有其他对它的引用。要专门针对 textarea 焦点，您可以将保存的值更改为 $input-focus-color。

【讨论】：