Changing theme colors in Materialize with Sass (React)

Question

I can't seem to find many tutorials about over-riding colors in Materialize in Sass. The only tutorial I can find is on downloading the Sass files and then integrating this in the project directly by editing the _variables.scss and re-compiling to get the new CSS file.

Ideally I would like to use the NPM package so I don't have to manually keep updating the Sass folder. So, my aim is to use the NPM package "materialize-css" and over-ride the colors in Sass somehow.

I have setup a React test project. The code I have is as follows:

INDEX.JS

 import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.scss';
    import App from './App';
    import "materialize-css/dist/js/materialize.min.js"; //This is for JS functionality

    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    );

index.scss

@import "materialize-css/sass/materialize.scss";

// $primary-color: #346BA7 !default;
// @import "materialize-css/sass/components/_variables.scss"; 
// **The commented lines above do not work**.

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
}

...

In the index.scss, this is where I would like to do the theming. Could anyone please point me in the right direction?

Thank you.

Did you watch this tutorial? medium.com/@mattdlockyer/…

Ruan Duarte
– Ruan Duarte

2020-04-27 20:33:40 +00:00
Commented Apr 27, 2020 at 20:33 — Ruan Duarte
– Ruan Duarte, Commented Apr 27, 2020 at 20:33

John Wilger · Accepted Answer · 2020-10-11 21:37:34Z

1

The color variables are defined in the SASS source using !default, so all you need to do is define the same variables before importing the main materialize.scss, i.e:

$primary-color: color("blue-grey", "lighten-2");
$primary-color-light: lighten($primary-color, 15%);
$primary-color-dark: darken($primary-color, 15%);
$secondary-color: color("amber", "lighten-1");

@import '../node_modules/materialize-css/sass/materialize.scss';

N.B. the use of !default in the SASS source means that they are only defining the variable if it is not already defined.

answered Oct 11, 2020 at 21:37

John Wilger

312 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rezzy · Accepted Answer · 2020-04-28 09:33:38Z

0

I think I have figured it out but not sure if it is the best method so if anyone knows anything better, please let me know.

@import "../node_modules/materialize-css/sass/components/_color-variables.scss";

$primary-color: color("blue-grey", "lighten-2") !default;
$primary-color-light: lighten($primary-color, 15%) !default;
$primary-color-dark: darken($primary-color, 15%) !default;
$secondary-color: color("amber", "lighten-1") !default;

@import '../node_modules/materialize-css/sass/materialize.scss';

edited Apr 28, 2020 at 9:33

answered Apr 28, 2020 at 8:51

Rezzy

3346 silver badges20 bronze badges

Collectives™ on Stack Overflow

Changing theme colors in Materialize with Sass (React)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related