Question

我正在使用materializecss gem处理rails应用程序。

这是我的一些代码 application.scss :(我添加了颜色）

@import "materialize/components/color";  
$primary-color: color("blue-grey", "base") !default;    
$secondary-color: color("brown", "base") !default;    
@import "materialize";

标记：

<div class="input-field">
    <%= f.text_field :title %>
    <%= f.label :title %>
</div>

<div class="chips chips-autocomplete"></div>

（我在脚本中初始化芯片自动完成）所以我有两个输入标签，但我遇到了一些问题

div（输入字段）颜色变为棕色。但div（芯片芯片自动完成）颜色没有改变。（如果我选择芯片，芯片的颜色也不会改变）

我做错了什么？

Answer 1

2k17，我知道，但是我也有同样的问题，所以也许有人可以来这里，答案可能会有用。

您做对了，但是_variables.sass不会处理$primary或$secondary颜色变量。

边框和选定的芯片颜色已在文件中进行了硬编码，您可以在此处查看。

https://github.com/Dogfalo/materialize/blob/v1-dev/sass/components/_variables.scss#L130

由于该库似乎已死，您可以将其派生并替换为

$chip-selected-color: #26a69a !default;

通过

$chip-selected-color: $secondary-color !default;

或者，如果您不想更改实例化文件，可以像这样在global.css中覆盖颜色：

.input-field .chips.focus {
  border-bottom: 1px solid #407ec9;
  box-shadow: 0 1px 0 0 #407ec9;
}
.input-field .chip:focus {
  background-color: #407ec9;
}

具体化芯片 - 自动完成输入颜色不会改变

1 个答案: