Svelte Material UI（SMUI）输入框标签为何呈紫色及修复方法

有两种常用方法可以解决这个问题：

方法1：用自定义CSS直接覆盖 #

原样式的优先级不算特别高，你可以写针对性的CSS来替换紫色。如果要全局修改所有SMUI输入框的聚焦标签颜色，在全局样式文件或者组件的<style>里添加：

:global(.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label) {
  color: #2196F3; /* 替换成你想要的颜色，比如这里用蓝色 */
}

如果只想改某个特定输入框，给组件加个自定义类，再写更精准的规则：

<style>
.custom-textfield :global(.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label) {
  color: #1976D2;
}
</style>

<Textfield class="custom-textfield" bind:value={valueA} label="Label">
  <HelperText slot="helper">Helper Text</HelperText>
</Textfield>

Svelte的样式默认是作用域隔离的，所以需要用:global()来穿透到SMUI的内部类。

方法2：通过SMUI主题变量统一定制 #

这是更推荐的官方方式，直接修改Material Design的主题主色，能统一所有SMUI组件的风格（比如输入框下划线、按钮颜色等都会跟着变）。在全局样式文件里添加：

:root {
  --mdc-theme-primary: #2196F3; /* 设置你的主色调 */
}

这样输入框聚焦时的浮动标签颜色会自动变成你设置的主色，不用单独写标签的颜色规则。

内容的提问来源于stack exchange，提问作者daisy