迁移至Material3后，如何去除TextInputLayout的淡粉色色调？

问题背景 #

应用从MaterialComponents迁移到Material3后，TextInputLayout组件出现无法消除的淡粉色色调。尝试调整主题的colorSurfaceContainerHighest或组件的boxBackgroundColor为灰色（如#15000000）时，粉色仍存在；但设置蓝色、绿色等颜色可正常生效。切换TextInputLayout.FormField的父样式对粉色无影响，仅修改主主题时色调才会变化。

原样式（MaterialComponents）：

新样式（Material3）：

当前主题代码：

<resources>
    <!-- Base application theme. -->
    <style name="Theme.Kanji" parent="Theme.Material3.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/light_blue</item>
        <item name="colorPrimaryVariant">@color/navy_blue</item>
        <item name="colorOnPrimary">@color/black</item>

        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/brown</item>
        <item name="colorSecondaryVariant">@color/yellow</item>
        <item name="colorOnSecondary">@color/white</item>

        <item name="android:textColor">@color/black</item>
        <item name="android:colorBackground">@color/white</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

    <style name="TextInputLayout.FormField" parent="Widget.Material3.TextInputLayout.FilledBox">
        <item name="boxStrokeColor">?attr/colorPrimaryVariant</item>
        <item name="cursorColor">?attr/colorPrimaryVariant</item>
        <item name="hintTextColor">?attr/colorPrimaryVariant</item>
    </style>

</resources>

解决步骤 #

1. 显式指定主题的Surface容器颜色 #

Material3中FilledBox样式的TextInputLayout默认使用colorSurfaceContainerHighest作为背景色，直接在主题中明确设置该颜色，覆盖系统默认值：

<style name="Theme.Kanji" parent="Theme.Material3.Light.NoActionBar">
    <!-- 保留原有配置 -->
    <item name="colorSurfaceContainerHighest">#15000000</item>
</style>

2. 强制锁定TextInputLayout背景色 #

如果主题级配置无效，直接在组件样式中设置boxBackgroundColor，并禁用背景色的状态叠加模式：

<style name="TextInputLayout.FormField" parent="Widget.Material3.TextInputLayout.FilledBox">
    <!-- 保留原有配置 -->
    <item name="boxBackgroundColor">#15000000</item>
    <!-- 禁用状态依赖的背景色变化，避免系统自动添加色调 -->
    <item name="boxBackgroundMode">solid</item>
</style>

3. 排查错误颜色的隐式影响 #

淡粉色通常是Material3默认的colorError色调，检查主题是否未显式覆盖该颜色，导致系统错误色影响输入框背景。添加以下配置到主题：

<style name="Theme.Kanji" parent="Theme.Material3.Light.NoActionBar">
    <!-- 保留原有配置 -->
    <item name="colorError">@color/your_custom_error_color</item>
    <item name="colorOnError">@color/white</item>
</style>

4. 用Material主题工具生成合规配色 #

如果以上方法都无效，使用Material官方的主题生成工具创建匹配需求的主题颜色，确保所有Surface相关颜色无异常色调叠加，再将生成的颜色值替换到项目主题中。

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