Html 如何更改local home.scss文件中物化输入字段的文本颜色

框架：在rails上进行反应 CSS：具体化

因此，我使用materialize的defualt 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">

但是，这仍然会渲染默认的materialize turqoiuse颜色：

---

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

如果我没记错的话，您应该能够定位您的

文本区域

查看此链接：

textarea {
color:#2196f3;
}

所以我发现@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更容易处理，只针对特定元素。
我们都知道这是懒惰的，应该避免（如果可能）：

使用！重要声明通常被认为是不好的做法
因为它有副作用，扰乱了CSS的核心之一
机制：特异性。在许多情况下，使用它可能表示性能差
CSS架构

在有些情况下，它是可以忍受的，甚至是首选的，但是
你一定要仔细检查其中一个案例是否适用于你的客户
使用前的情况

更好的解决方案是从了解如何构建样式表开始的，一旦您这样做了，就可以使用特定于每个项目的样式表创建自定义构建，以便您所引用的默认样式表包含您喜欢的颜色。没有必要写得太多

下载将使您能够控制要包含哪些组件，以及默认情况下它们应该具有哪些属性。在sass文件夹中可以找到_variables.scss，这是框架的默认属性所在。只需更改这些变量，然后重新编译materialize.scs即可

在_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.scs的开头，主题颜色被布置出来，几乎所有其他元素颜色都源自这些规则：

// 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

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

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

// 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;