material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.13k stars 2.15k forks source link

List background color is not themeable #6336

Open ns8482e opened 4 years ago

ns8482e commented 4 years ago

Bug report

When changing $background for the theme, List's background is not updated, parent's background-color is applied,

Steps to reproduce

  1. Define SCSS
    
    @use "@material/theme" with (
    $background: #121212,
    $surface: #121212,
    $on-surface:#fff
    );

@use "@material/drawer"; @use "@material/list";

@include list.core-styles; @include drawer.core-styles;

2. Define html 

```html
<aside class="mdc-drawer">
.....
</aside>
<ul class="mdc-list" role="group" aria-label="List with checkbox items">
......
</ul>

Actual behavior

List is taking backround-color from parent element not from the theme.

Expected behavior

It should take surface color provided in theme.

Screenshots

image

Your Environment:

Software Version(s)
MDC Web 7.0.0
Browser Chrome Version 84.0
Operating System Windows 10

Possible solution

Define background-color using following

.mdc-list{
  @include theme.prop(background-color, surface);
}
abhiomkar commented 4 years ago

Thanks @ns8482e for reporting this bug.

MDC List does not seem to apply any background color, it is transparent with the background layer. This seems like a bug.