Override CSS Material Properties

I included Materialize CSS first and then . I linked my css file.

In which I have an example class that sets the property background-colorto red, but that does not override the default color (which is set by materialization-css).

Here is an example: https://jsfiddle.net/79ss2eyr/1/

I would not want to change anything in materializing the source files, instead I want to add additional classes and set additional colors.

Here's what the inspector says:

enter image description here

How do I do this and why my css properties do not override materialization, since it is associated with the after frame?

+4
3

Inn footer.page-footer {}, .app-bg. Materialize.

, footer.app-bg !important:

footer.app-bg {
  background-color: red;
}

.app-bg {
  background-color: red !important;
}
+1

css , :

footer.app-bg {
  background-color: red;
}
+5

If your css is not applied to the element due to other CSS applied, just use !importantto indicate that your css is important.

.app-bg {
  background-color: red !important;
}

Example: https://jsfiddle.net/79ss2eyr/2/

0
source

All Articles