Question

我似乎在Sass的Materialize中找不到很多关于覆盖颜色的教程。我可以找到的唯一教程是下载Sass文件，然后通过编辑_variables.scss并重新编译以获取新的CSS文件将其直接集成到项目中。

理想情况下，我想使用NPM软件包，因此不必手动不断更新Sass文件夹。因此，我的目的是使用NPM包“ materialize-css”并以某种方式覆盖Sass中的颜色。

我已经设置了一个React测试项目。我的代码如下：

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

...

在index.scss中，我想进行主题化。有人可以指出正确的方向吗？

谢谢。

Answer 1

我想我已经弄清楚了，但是不确定这是否是最好的方法，所以如果有人对它有所了解，请告诉我。

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

Answer 2

颜色变量是使用!default在SASS源中定义的，因此您要做的就是在导入主materialize.scss之前定义相同的变量，即：

$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';

在SASS源代码中使用!default意味着他们仅在定义变量（如果尚未定义）时使用它们。

在Sass的Materialise中更改主题颜色（反应）

2 个答案: