Change Container Fill Colour for MDC Button

Question

How can I change the container colour of a MDC button without using SASS mixins as described here. What is the actual equivalent CSS to specify to do it?

I have tried the following:

.mdc-button:after,
.mdc-button:before {
  background-color: #000000
}

.mdc-button {
  background-color: #000000;
}


<div class="button-container">
  <button class="mdc-button mdc-button--raised foo">
            Foo
        </button>
  <button class="mdc-button mdc-button--raised bar">
            Bar
        </button>
</div>

Here is the complete code:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="https://material.io/favicon.ico">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
        <link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
    </head>
    <body>
    <style>
    .mdc-button:after,
    .mdc-button:before {
            background-color: #000000
    }
    
    .mdc-button {
      background-color: #000000;
    }
    </style>
    <form action="home.html">
    
        <div class="button-container">
     <button class="mdc-button mdc-button--raised log-in">
                Foo
            </button>
     <button class="mdc-button mdc-button--raised sign-up">
                Bar
     </button>
        </div>
    </form>
    
    <script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>
    
    </body>
    </html>

as you can see it's working fine here .. so what's the issue? — Temani Afif, Aug 04 '18 at 09:45
That's strange - it must be something to do with the way the Play framework is reading the CSS — , Aug 04 '18 at 09:46
there is for sure more CSS involved, so you need to check all the code you have not only the code your write — Temani Afif, Aug 04 '18 at 09:47
@TemaniAfif I've posted the complete code. I think something in the material-components-web.min.css is clashing with my custom CSS but I do not know what. I thought my CSS would override anything prior. — , Aug 04 '18 at 09:54

Temani Afif · Accepted Answer · 2018-08-04T10:07:20.780

It's a specificity issue, you need to increase the specificity of your selector to be able to override the one defined by Material.

This one is the culprit .mdc-button--raised:not(:disabled), its specifity is equal to the specificity of 2 classes (Points in CSS specificity) so you will need to use at least 3 classes¹ in order to be sure you will override it.

.button-container .mdc-button.mdc-button--raised{
  background-color: #000000;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">

<form action="home.html">

  <div class="button-container">
    <button class="mdc-button mdc-button--raised log-in">
                Foo
            </button>
    <button class="mdc-button mdc-button--raised sign-up">
                Bar
     </button>
  </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

You can only do it with 2 classes if you will include your CSS after their CSS:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://unpkg.com/material-components-web/dist/material-components-web.min.css">
<style>
.button-container .mdc-button{
  background-color: #000000;
}
</style>
<form action="home.html">

  <div class="button-container">
    <button class="mdc-button mdc-button--raised log-in">
                Foo
            </button>
    <button class="mdc-button mdc-button--raised sign-up">
                Bar
     </button>
  </div>
</form>

<script src="https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>

^{1: it's not the only way, we can use ID or other pseudo classes, but in this case it's the easiest and most suitable way}

score 3 · Answer 2 · answered Aug 04 '18 at 10:02

If you don't want to use SASS, you can use either CSS variables like:

:root {
    --mdc-theme-primary: #ff9900; 
}
.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) {
    background-color: var(--mdc-theme-primary,#ff9900);
}

or directly set the background-color property:

.mdc-button--raised:not(:disabled), .mdc-button--unelevated:not(:disabled) {
    background-color: #ff9900;
}

to override the property, your stylesheet should go after the MDC stylesheet.

And here is the article about how to change colors effectively with SASS:
https://material.io/design/color/applying-color-to-ui.html#buttons-chips-selection-controls

Change Container Fill Colour for MDC Button

2 Answers2