Изменение цвета темы в Materialize с помощью Sass (React) - PullRequest
Новая
       31

Изменение цвета темы в Materialize с помощью Sass (React)

0 голосов
/ 27 апреля 2020

Кажется, я не могу найти много уроков о переопределении цветов в Materialise в Sass. Единственное учебное пособие, которое я могу найти, - это загрузить файлы Sass и затем интегрировать их в проект, отредактировав файл _variables.s css и перекомпилировав его, чтобы получить новый файл CSS.

В идеале я хотел бы использовать пакет NPM, поэтому мне не нужно постоянно обновлять папку Sass. Итак, моя цель - использовать NPM пакет «materialize- css» и каким-то образом переопределить цвета в Sass.

Я настроил тестовый проект React. У меня есть следующий код:

ИНДЕКС. 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.s css

@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;
}

...

В index.s css это то место, где я хотел бы заняться тематикой. Может ли кто-нибудь, пожалуйста, указать мне в правильном направлении?

Спасибо.

1 Ответ

0 голосов
/ 28 апреля 2020

Я думаю, что понял это, но не уверен, что это лучший метод, поэтому, если кто-нибудь знает что-нибудь лучше, пожалуйста, дайте мне знать. 

@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';
...