Material 3 materialThemeOverlay 产生没有主题的亮粉色按钮

Question

我正在从 M2 迁移到 M3，但我的基本 materialThemeOverlay 不再有效。我密切关注 the doc 底部的代码，它与我对 M2 的代码非常匹配：

styles.xml

<style name="SecondaryThemeOverlay" parent="">
    <item name="colorPrimary">@color/md_theme_light_secondary</item>
    <item name="colorOnPrimary">@color/md_theme_light_onSecondary</item>
</style>

<style name="Widget.Button.Secondary" parent="Widget.Material3.Button">
    <item name="materialThemeOverlay">@style/SecondaryThemeOverlay</item>
</style>

layout.xml:

<Button
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Standard Button" />

<Button
  style="@style/Widget.Button.Secondary"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Standard Button Secondary" />

lib 版本是 com.google.android.material:material:1.6.0-beta01，Activity 是一个 AppCompatActivity。

应用主题父项是 Theme.Material3.DayNight.NoActionBar。

另请注意，设置 backgroundTint 效果很好。

Answer 1

你应该像这样在 materialThemeOverlay 上使用 ThemeOverlay。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Button style on both light and night mode -->
    <style name="AppButtonStyle" parent="Widget.Material3.Button">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <!-- Button with text style on both light and night mode -->
    <style name="AppButtonTextStyle" parent="Widget.Material3.Button.TextButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.TextButton</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <!-- Button outline style on both light and night mode -->
    <style name="AppOutlinedButtonStyle" parent="Widget.Material3.Button.OutlinedButton">
        <item name="materialThemeOverlay">@style/ThemeOverlay.App.Button.OutlinedButton</item>
        <item name="android:textAppearance">@style/TextAppearance.App.Button</item>
        <item name="shapeAppearanceOverlay">@style/ShapeAppearance.App.SmallComponent</item>
    </style>

    <style name="ThemeOverlay.App.Button" parent="ThemeOverlay.Material3.Button">
        <!-- Background color -->
        <item name="colorPrimary">@color/primaryDarkAccent</item>
        <!-- Text color -->
        <item name="colorOnPrimary">@android:color/white</item>
    </style>

    <style name="ThemeOverlay.App.Button.TextButton" parent="ThemeOverlay.Material3.Button.TextButton">
        <!-- Background color -->
        <item name="colorPrimary">@color/primaryDarkAccent</item>
        <!-- Text color -->
        <item name="colorOnSurface">@android:color/white</item>
    </style>

    <style name="ThemeOverlay.App.Button.OutlinedButton" parent="ThemeOverlay.Material3.Button">
        <!-- Background color -->
        <item name="colorOnSurface">@color/primaryDarkAccent</item>
        <!-- Text color -->
        <item name="colorPrimary">@color/primaryDarkAccent</item>
    </style>

    <style name="TextAppearance.App.Button" parent="TextAppearance.Material3.LabelLarge">
        <item name="fontFamily">sans-serif-medium</item>
        <item name="android:fontFamily">sans-serif-medium</item>
    </style>
</resources>

在你的主题中像这样使用它。

<item name="materialButtonStyle">@style/AppButtonStyle</item>

不幸的是，文档中的示例似乎一如既往地不正确。

Material 3 materialThemeOverlay 产生没有主题的亮粉色按钮

Material 3 materialThemeOverlay produces bright pink button with no theme

android

android-theme

material-design

material-components

material-components-android