MaterialButton style being overridden, how do I keep it?

Question

I'm trying to use a MaterialButtonToggleGroup inside my BottomSheetDialog. However the style for the button is being overriden by the current theme I'm using for the BottomSheet

In a regular fragment:

Using the attribute

style="?attr/materialButtonOutlinedStyle"

I have this blue outline on my Material Button inside my ToggleGroup

<com.google.android.material.button.MaterialButtonToggleGroup
        android:id="@+id/toggle_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:checkedButton="@+id/btnOne"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginEnd="16dp"
        app:selectionRequired="true"
        app:singleSelection="true">

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnOne"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Button 1"
            android:minHeight="0dp"
            android:textSize="12sp"/>

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnTwo"
            style="?attr/materialButtonOutlinedStyle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:minHeight="0dp"
            android:text="Button 2"
            android:textSize="12sp"/>


    </com.google.android.material.button.MaterialButtonToggleGroup>

But when using it inside my BottomSheet I get this:

The theme for bottom sheet I'm using:

<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
        ...
        
        <item name="bottomSheetDialogTheme">@style/AppBottomSheetDialogTheme</item>
</style>

    <style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheetRoundedCorners</item>
    </style>

    <style name="BottomSheetRoundedCorners" parent="Widget.Design.BottomSheet.Modal">
        <item name="android:background">@drawable/bgr_bottomsheet_round_corners</item>
    </style>

How can I keep the style

style="?attr/materialButtonOutlinedStyle"

for the MaterialButton while using the BottomSheet's theme?

Edit:______________________________

I've tried adding

<item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item> to my BottomSheet's theme but it doesn't do anything.

<style name="AppBottomSheetDialogTheme" parent="Theme.Design.Light.BottomSheetDialog">
        <item name="bottomSheetStyle">@style/BottomSheetRoundedCorners</item>
        <item name="materialButtonStyle">@style/Widget.MaterialComponents.Button.OutlinedButton</item>
    </style>

Have also tried it with

<item name="materialButtonStyle">?attr/materialButtonOutlinedStyle</item>

Answer 1

you can use this theme:

<style name="BottomSheet" parent="Theme.MaterialComponents.DayNight.BottomSheetDialog"/>

<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    ...
    
    <item name="bottomSheetDialogTheme">@style/BottomSheet</item>

DO NOT USE THEME.DESIGN.LIGHT