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

How to change the text colour of a materialize input field within local home.scss file(如何在本地home.scss文件中更改物化输入字段的文本颜色)

本文介绍了如何在本地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">

将脚本放在<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更容易处理,只针对特定元素。

这篇关于如何在本地home.scss文件中更改物化输入字段的文本颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

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

基础教程推荐