1

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?

3 Answers3

2

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.

0

If I remember correctly, you should just be able to target your textarea.

Check this out: JSFiddle

textarea {
color:#2196f3;
}
knocked loose
  • 3,142
  • 2
  • 25
  • 46
0

We all know that !important is lazy and should be avoided (if possible):

Using the !important declaration is often considered bad practice because it has side effects that mess with one of CSS's core mechanisms: specificity. In many cases, using it could indicate poor CSS architecture.

There are cases in which it's tolerable or even preferred, but make sure you double check that one of those cases actually applies to your situation before using it.

A better solution starts by understanding how materializecss builds it's stylesheet, and once you do, create a custom build using SASS that is specific to each project so that the default stylesheet you are referencing contains your preferred colours. No need to over-write.

Download the sass version will give you compete control over what components you want to include, and what properties they should have by default. Inside the sass folder you'll find _variables.scss, and this is where the default properties for the framework live. It's as easy as changing these variables and then re-compiling materialize.scss.

Inside _input-fields.scss, we can see a variable being referenced called $input-focus-color on lines 54-58:

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

Back to variables.scss, section 10 (Forms), on line 172 we see $input-focus-color is referencing another color, $secondary-color:

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

Right at the start of variables.scss the theme colors are laid out, and pretty much everything other element color is derived from these rules:

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

So, in short, changing $secondary-color would get the change you are looking for - but it will also change all other references to it. To target the textarea focus specifically, you can change the value saved to $input-focus-color.

Sean Doherty
  • 2,273
  • 1
  • 13
  • 20