I just (finally) upgraded an application from Xamarin to MAUI. After doing the upgrade, I found that any background color (other than the default) applied to a button causes the button to grow in vertical size, as well as have an ugly white box around it with a box shadow. This is true throughout my entire application, but here’s an example:

This is the code that I have to display those buttons. As you can see, the strange styling happens both when I have the “BackgroundStyle” attribute set on the page itself (green), as well as when the attribute is set in my App.xaml file (red/danger).

<Grid x:Name="coordinatorSection">
    <Grid.RowDefinitions>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
        <RowDefinition></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition></ColumnDefinition>
        <ColumnDefinition></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <Button IsVisible="{Binding ShowConfirm}" Text="Confirm" FontSize="Medium" Clicked="ConfirmClicked" Style="{StaticResource buttonStyle}" BackgroundColor="#218838" HorizontalOptions="FillAndExpand"></Button>
    <Button Grid.Column="1" IsVisible="{Binding ShowDeny}" Text="Deny" FontSize="Medium" Clicked="DenyClicked" Style="{StaticResource dangerButtonStyle}" HorizontalOptions="FillAndExpand"></Button>
    <Button IsVisible="{Binding ShowTentative}" Grid.ColumnSpan="2" BackgroundColor="#e0a800" Text="Tentative" FontSize="Medium" Clicked="TentativeClicked" Style="{StaticResource buttonStyle}" HorizontalOptions="FillAndExpand"></Button>
    <Button Grid.Row="1" Grid.ColumnSpan="2"  Text="Message Requester"  FontSize="Medium" Clicked="MessageRequesterClicked" Style="{StaticResource buttonStyle}" HorizontalOptions="FillAndExpand"></Button>
    <Button Grid.Row="2" Grid.ColumnSpan="2"  Text="Edit Request"  FontSize="Medium" Clicked="EditRequestClicked" Style="{StaticResource buttonStyle}" HorizontalOptions="FillAndExpand"></Button>
</Grid>

These are the relevant portions of my App.xaml file:

            <Style x:Key="buttonStyle" TargetType="Button">
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="CornerRadius" Value="20" />
                <Setter Property="Margin" Value="5" />
                <Setter Property="FontFamily">
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS" Value="Roboto-Black" />
                        <On Platform="Android" Value="Roboto/Roboto-Regular.ttf#Roboto-Regular" />
                        <On Platform="UWP" Value="Assets/Fonts/Roboto/Roboto-Regular.ttf#Roboto" />
                    </OnPlatform>
                </Setter>
            </Style>
            <Style x:Key="secondaryButtonStyle" TargetType="Button">
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="FontSize" Value="18"/>
                <Setter Property="CornerRadius" Value="15" />
                <Setter Property="HorizontalOptions" Value="FillAndExpand" />
                <Setter Property="FontFamily">
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS" Value="Roboto-Black" />
                        <On Platform="Android" Value="Roboto/Roboto-Regular.ttf#Roboto-Regular" />
                        <On Platform="UWP" Value="Assets/Fonts/Roboto/Roboto-Regular.ttf#Roboto" />
                    </OnPlatform>
                </Setter>
                <Setter Property="Padding" Value="0, 0, 0, 0">
                </Setter>
            </Style>
            <Style x:Key="dangerButtonStyle" TargetType="Button">
                <Setter Property="HorizontalOptions" Value="Center" />
                <Setter Property="BackgroundColor" Value="#dc3545" />
                <Setter Property="TextColor" Value="White" />
                <Setter Property="FontSize" Value="18"/>
                <Setter Property="CornerRadius" Value="20" />
                <Setter Property="Margin" Value="5" />
                <Setter Property="FontFamily">
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS" Value="Roboto-Black" />
                        <On Platform="Android" Value="Roboto/Roboto-Regular.ttf#Roboto-Regular" />
                        <On Platform="UWP" Value="Assets/Fonts/Roboto/Roboto-Regular.ttf#Roboto" />
                    </OnPlatform>
                </Setter>
                <Setter Property="Padding" Value="0, 0, 0, 0">
                </Setter>
            </Style>

Finally, my styles.xml:

<resources>

    <style name="MainTheme" parent="MainTheme.Base">
    </style>
    <style name="MainTheme.Base" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="android:colorActivatedHighlight">@color/material_grey_300</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="colorPrimary">#1ca497</item>
        <item name="colorPrimaryDark">#1976D2</item>
        <item name="colorAccent">#1ca497</item>
        <item name="windowActionModeOverlay">true</item>
        <item name="android:textAllCaps">false</item>
        <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>
    </style>

    <style name="AppCompatDialogStyle" parent="Theme.MaterialComponents.Light.Dialog">
        <item name="colorAccent">#1ca497</item>
        <item name="android:buttonBarButtonStyle">@style/DatePickerDialogButton</item>
    </style>

    <style name="DatePickerDialogButton" parent="Widget.MaterialComponents.Button.TextButton.Dialog">
        <item name="android:textColor">#1ca497</item>
    </style>

</resources>

• I’ve tried explicitly setting the border and shadow properties, but that only adds additional borders and shadows to these strange white boxes.
• The problem only occurs on buttons with a specifically set background color. The default (primary) colored buttons are as expected.
• I’ve tried setting both the Background and BackgroundColor attributes; the same result happens.
• This happens even if I make a new button, and then set the background color on it.

I would greatly appreciate any help or direction with this. I’ll gladly provide more code, examples, or details about the problem. Thanks in advance.