From b88be173520ce6320b3b4c02142dd6f64181e285 Mon Sep 17 00:00:00 2001
From: yousafravian <yousafrazaravian@gmail.com>
Date: Wed, 13 May 2026 04:08:21 +0500
Subject: [PATCH] feat(material/bottom-sheet): add containerClass config option

The `panelClass` configuration for the bottom sheet was documented as applying to the bottom sheet container, but in reality it applies to the overlay pane. To allow users to apply classes directly to the container element (`mat-bottom-sheet-container`) without introducing a breaking change to `panelClass`, a new `containerClass` property has been added to `MatBottomSheetConfig`.

Fixes #33103
---
 goldens/material/bottom-sheet/index.api.md      |  1 +
 .../bottom-sheet/bottom-sheet-config.ts         |  5 ++++-
 .../bottom-sheet/bottom-sheet-container.ts      | 10 ++++++++++
 src/material/bottom-sheet/bottom-sheet.spec.ts  | 17 +++++++++++++++++
 4 files changed, 32 insertions(+), 1 deletion(-)

diff --git a/goldens/material/bottom-sheet/index.api.md b/goldens/material/bottom-sheet/index.api.md
index 82c18018fbeb..8b6fbb64049b 100644
--- a/goldens/material/bottom-sheet/index.api.md
+++ b/goldens/material/bottom-sheet/index.api.md
@@ -56,6 +56,7 @@ export class MatBottomSheetConfig<D = any> {
     backdropClass?: string;
     bindings?: Binding[];
     closeOnNavigation?: boolean;
+    containerClass?: string | string[];
     data?: D | null;
     direction?: Direction;
     disableClose?: boolean;
diff --git a/src/material/bottom-sheet/bottom-sheet-config.ts b/src/material/bottom-sheet/bottom-sheet-config.ts
index dd7b6e5fc737..d97c2da35b0a 100644
--- a/src/material/bottom-sheet/bottom-sheet-config.ts
+++ b/src/material/bottom-sheet/bottom-sheet-config.ts
@@ -30,9 +30,12 @@ export class MatBottomSheetConfig<D = any> {
    */
   injector?: Injector;
 
-  /** Extra CSS classes to be added to the bottom sheet container. */
+  /** Extra CSS classes to be added to the bottom sheet pane. */
   panelClass?: string | string[];
 
+  /** Extra CSS classes to be added to the bottom sheet container. */
+  containerClass?: string | string[];
+
   /** Text layout direction for the bottom sheet. */
   direction?: Direction;
 
diff --git a/src/material/bottom-sheet/bottom-sheet-container.ts b/src/material/bottom-sheet/bottom-sheet-container.ts
index 49bbc54d830f..a04bfc75c1e6 100644
--- a/src/material/bottom-sheet/bottom-sheet-container.ts
+++ b/src/material/bottom-sheet/bottom-sheet-container.ts
@@ -18,7 +18,9 @@ import {
 } from '@angular/core';
 import {Subscription} from 'rxjs';
 import {CdkPortalOutlet} from '@angular/cdk/portal';
+import {coerceStringArray} from '@angular/cdk/coercion';
 import {_animationsDisabled} from '../core';
+import {MatBottomSheetConfig} from './bottom-sheet-config';
 
 const ENTER_ANIMATION = '_mat-bottom-sheet-enter';
 const EXIT_ANIMATION = '_mat-bottom-sheet-exit';
@@ -72,6 +74,14 @@ export class MatBottomSheetContainer extends CdkDialogContainer implements OnDes
     super();
 
     const breakpointObserver = inject(BreakpointObserver);
+    const bottomSheetConfig = this._config as MatBottomSheetConfig;
+
+    if (bottomSheetConfig.containerClass) {
+      const containerClasses = coerceStringArray(bottomSheetConfig.containerClass);
+      if (containerClasses.length) {
+        this._elementRef.nativeElement.classList.add(...containerClasses);
+      }
+    }
 
     this._breakpointSubscription = breakpointObserver
       .observe([Breakpoints.Medium, Breakpoints.Large, Breakpoints.XLarge])
diff --git a/src/material/bottom-sheet/bottom-sheet.spec.ts b/src/material/bottom-sheet/bottom-sheet.spec.ts
index 79b162609eff..79f35fc9c7f7 100644
--- a/src/material/bottom-sheet/bottom-sheet.spec.ts
+++ b/src/material/bottom-sheet/bottom-sheet.spec.ts
@@ -148,6 +148,23 @@ describe('MatBottomSheet', () => {
     expect(containerElement.getAttribute('aria-modal')).toBe('false');
   });
 
+  it('should apply the specified container class', () => {
+    bottomSheet.open(PizzaMsg, {containerClass: 'custom-container-class'});
+    viewContainerFixture.detectChanges();
+
+    const containerElement = overlayContainerElement.querySelector('mat-bottom-sheet-container')!;
+    expect(containerElement.classList.contains('custom-container-class')).toBe(true);
+  });
+
+  it('should apply multiple container classes', () => {
+    bottomSheet.open(PizzaMsg, {containerClass: ['custom-class-1', 'custom-class-2']});
+    viewContainerFixture.detectChanges();
+
+    const containerElement = overlayContainerElement.querySelector('mat-bottom-sheet-container')!;
+    expect(containerElement.classList.contains('custom-class-1')).toBe(true);
+    expect(containerElement.classList.contains('custom-class-2')).toBe(true);
+  });
+
   it('should be able to set aria-modal', () => {
     bottomSheet.open(PizzaMsg, {
       ariaModal: true,