CODEWITHSUNDEEP
angularjscssangular-material
Prashanth Sams
Prashanth Sams

Reputation: 21129

How to prioritize custom css over the default Angular-material css

By default, the search label is padded to left.. i.e., padding-left: 3px is assigned by Angular-material.min.css

enter image description here

When I pad it to right by customizing the same in my custom.less file, it's not taken high priority over the default css from Angular-material.min.css

enter image description here

Upvotes: 2

Views: 5817

Answers (3)

Musa Baloyi
Musa Baloyi

Reputation: 607

Had the same issue, see bellow for solution. on you angular.json file, under your styles, make sure you use your custom style file as the last one

"styles": 
  [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "src/custom-theme.scss"
  ],

Upvotes: 1

Caleb Anthony
Caleb Anthony

Reputation: 1123

Load your CSS in the proper order.

HTML

<head>
  <link rel="stylesheet" type="text/css" href="Angular-material.min.css">
  <link rel="stylesheet" type="text/css" href="custom.css">
</head>

This is because the C in CSS stands for Cascading. This means that rules that are seen later on overwrite rules that were seen previously.

Upvotes: 5

Kapitula Alexey
Kapitula Alexey

Reputation: 388

Try adding !important to your css style property:

padding-left: 29px !important;

Upvotes: 0

Related Questions