Search code examples
htmlcssreactjsmaterialize

How to change the text colour of a materialize input field within local home.scss file

Framework: react on rails CSS: Materialize

So I'm using materialize's defualt css package and importing it as:

  <!--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">

With scripts at the bottom of the <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>

Here are the elements I'm looking to target:

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

This is the CSS I'm adding to target the element I want to change app/assets/stylesheets directory under home.scss:

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

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

However, this is still rendering the default materialize turqoiuse colour:

render

Would anyone know how to change the input-field text colour to #2196f3? Is my CSS attenmpt correct? How would I store materialize locally, would that be a much easier way of achieving the css changes I want?

Solution

  • So I found @ether 's answer to be almost the correct way of achieving this. I found that,

    .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
}

    also worked. It's clearly !important to overwrite the imported materialize.css file with the local values - this is good as it keeps your local css a little easier to handle only targeting specific elements.