Angular - Remove mat-expansion-panel border & box-shadow

Question

Is there any way to remove the border, I think it's the box-shadow of a mat-expansion-panel from Angular Material? I want it to be all white, so you only would see Text and expansion arrow

<mat-accordion>
 <mat-expansion-panel class="" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

Take a look at the [theming guide](https://material.angular.io/guide/theming), and remove it with CSS — user184994, Aug 06 '18 at 19:46

score 100 · Answer 1 · answered Aug 06 '18 at 19:47

100

add mat-elevation-z0 class. Works like a charm, I needed to use that recently.

<mat-accordion>
 <mat-expansion-panel class="mat-elevation-z0" (opened)="panelOpenState = true"
                   (closed)="panelOpenState = false">

   <mat-expansion-panel-header>

     <mat-panel-title>
       <span class="right">Filter</span>
     </mat-panel-title>

   </mat-expansion-panel-header>

   <p><app-data></app-data></p>

 </mat-expansion-panel>
</mat-accordion>

answered Aug 06 '18 at 19:47

Tomasz Błachut

2,368
1
16
23

@Sergi Sadly i don't know. Try to inspect styles with DevTools – Tomasz Błachut Aug 07 '18 at 14:24
6

To remove hover style `.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { background: white; }` – Zesky Feb 27 '19 at 13:11
Using angular material, this is the perfect way to do it. Thank you. – Pramesh Bajracharya Oct 19 '20 at 16:52

score 17 · Answer 2 · answered Mar 16 '19 at 12:39

17

I do it with css:

.mat-expansion-panel:not([class*='mat-elevation-z']) {
    box-shadow: none;
}

answered Mar 16 '19 at 12:39

JBeen

390
4
9

Easy & short. Couldn't be any better! – ReturnTable Aug 21 '19 at 23:11

score 6 · Answer 3 · answered Apr 13 '21 at 06:19

6

Yes, You can remove box-shadow and border: Just Put in CSS or SCSS (Real-time work)

.mat-expansion-panel{
    box-shadow: none !important;
}

answered Apr 13 '21 at 06:19

Sarfaroj

61
1
4

score 1 · Answer 4 · edited Jan 17 '19 at 01:31

1

.mat-expansion-panel:not([class*='mat-elevation-z']) {
  box-shadow: 0px 0px 0px -2px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12); 
}

This will do.

edited Jan 17 '19 at 01:31

Nick

138,499
22
57
95

answered Jan 17 '19 at 01:25

Jay

135
8

score 0 · Answer 5 · answered Apr 15 '23 at 10:17

To get rid of the default border-radius you might to override the default border-radius values which you can find inspecting mat-expansion-panel in the browser inspector.

As you can see .mat-accordion .mat-expansion-panel:last-of-type and .mat-accordion .mat-expansion-panel:first-of-type sets the 4px border-radius

border-bottom-right-radius: 4px; border-bottom-left-radius: 4px;

border-top-right-radius: 4px; border-top-left-radius: 4px;

The below solution helps to precise override those values:

.mat-accordion {
    & > .mat-expansion-panel {
      &:first-of-type,
      &:last-of-type {
        border-radius: unset;
      }
    }

score -2 · Answer 6 · answered Jan 11 '19 at 09:33

-2

You can as well toggle the class mat-expansion-panel by doing

<mat-accordion>
  <mat-expansion-panel [class.mat-expansion-panel]="false">
     ...
  </mat-expansion-panel>
</mat-accordion>

answered Jan 11 '19 at 09:33

Maxime Lechevallier

892
9
15

This solution removes the shadow, but also disables the animations. – Vukašin Manojlović Feb 06 '20 at 23:45

Angular - Remove mat-expansion-panel border & box-shadow

6 Answers6