如何在本地home.scss文件中更改物化输入字段的文本颜色 [英] How to change the text colour of a materialize input field within local home.scss file
本文介绍了如何在本地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颜色：
有人知道如何将输入字段文本颜色更改为#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文件中更改物化输入字段的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
