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

Solution 2:

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: 01px00$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.