Menu
I am just starting off with the angular material.
I have a blank page (basic setup) as below:
HTML:
<html lang="en" >
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body ng-app="BlankApp" ng-cloak>
<!-- No Content -->
<!-- Angular Material Dependencies -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.1/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>
</html>
JS:
var app = angular.module('BlankApp', ['ngMaterial']);
Pretty basic.
When I inspect the elements, I am getting multiple me-theme-style as below:
I just started with angularjs and I am not sure if I did something wrong.
Any suggestion will be much appreciated!
Thanks!
535
A custom theme file does two things: Imports the mat-core() Sass mixin. This includes all common styles that are used by multiple components. This should only be included once in your application.
Angular Material's theming system lets you customize color and typography styles for components in your application. The theming system is based on Google's Material Design specification. This document describes the concepts and APIs for customizing colors.
There are four pre-built material themes and they are: deeppurple-amber, indigo-pink, pink-bluegrey, and purple-green. If you're using Angular CLI, importing a theme into your application is as simple as including one line in your angular. json file.
Angular is like a crazy cartoon multitool that comes equipped with refrigerators and lawn mowers, but sometimes all you need is piece of tin foil. The other answers here, while greatly helpful, talk around the solution without getting to the heart of the matter, which in my mind is helping the OP turn off the duplication.
Direct from the angular material docs
Lazy Generate Themes
By default, every theme is generated when defined. You can disable this in the configuration section using the $mdThemingProvider
angular.module('myApp', ['ngMaterial'])
.config(function($mdThemingProvider) {
//disable theme generation
$mdThemingProvider.generateThemesOnDemand(true);
});
Here's the exact syntax I used, and it worked like a champ. (Important to note this didn't break any style for us, either):
.config(['$mdThemingProvider', function($mdThemingProvider) {
$mdThemingProvider.generateThemesOnDemand(true);
}])
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
