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

2022-04-17 00:00:00 reactjs html css materialize

框架：在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">

将脚本放在<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/sets/style heets目录的元素

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

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

但是，这仍然呈现默认的物化Turqoiuse颜色：

render

有人知道如何将输入字段文本颜色更改为#2196f3吗？我的css注解正确吗？我将如何在本地存储实现，这是实现我想要的CSS更改的更容易的方式吗？

解决方案

所以我发现@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更容易处理，只针对特定元素。

相关文章