0
Ich versuche AngularJS Material zu verwenden. Ich kann die Textfarbe und -stile jedoch nicht anpassen.Die Schriftfarbe von angularjs material label kann nicht eingestellt werden
Ich habe verschiedene Dinge ausprobiert, wie MDBootstrap, md-color und grundlegende html style color, aber nichts scheint einen Einfluss auf die Label-Werte zu haben.
Dies ist vor allem in der zweiten <md-toolbar> definiert.
Ich habe diese Beiträge überprüft, aber sie haben nicht geholfen.
HTML:
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>CompanyName</title>
<!--link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"-->
<link rel="stylesheet" href="stylesheets/angular-material.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/css/mdb.min.css" />
<link rel="stylesheet" href="stylesheets/style.css">
</head>
<body>
<div>
<md-toolbar class="md-hue-2 green-text">
<div layout="row">
<h1 flex="10" style="text-align: center; font-size: x-large" >CompName</h1>
<h1 flex="80" style="text-align: center; font-size: x-large">Application Title</h1>
<h1 flex="10" style="text-align: center; font-size: x-large">image</h1>
</div>
</md-toolbar>
<md-toolbar class="md-hue-2">
<div class="md-toolbar-tools">
<section flex="40" layout-align="start center" layout="row">
<md-button class="md-icon-button" aria-label="Settings" ng-disabled="true">
<md-icon md-svg-icon="icons/ic_menu_black_24px.svg"></md-icon>
</md-button>
</section>
<section flex="40" layout="row" layout-sm="column" layout-align="start center" layout-wrap>
<div class="md-padding" ng-controller="filterRiskCtrl" ng-cloak>
<div>
<div layout="row">
<md-input-container>
<label>Risk</label>
<md-select ng-model="selectedRisk" multiple>
<md-optgroup class="green-text" label="Risk">
<md-option ng-value="risk.value" ng-repeat="risk in risks | filter: {category: 'risk' }">{{risk.value}}</md-option>
</md-optgroup>
</md-select>
</md-input-container>
</div>
</div>
</div>
</section>
<section flex="40" layout-align="start center" layout="row">
<md-input-container class="md-block">
<!-- Use floating label instead of placeholder -->
<!--md-icon md-svg-icon="images/icons/ic_search_black_24px.svg"></md-icon-->
<label>Type to Filter</label>
<input ng-model="user.name" type="text">
</md-input-container>
</section>
<section layout-align="end center" layout="row" flex="40">
<md-input-container>
<md-select ng-model="Sort" placeholder="Sort By" class="md-no-underline">
<md-option value="Risk">Risk</md-option>
<md-option value="Talk">Talk</md-option>
<md-option value="Name">Name</md-option>
<md-option value="Age">Age</md-option>
</md-select>
</md-input-container>
</section>
</div>
</md-toolbar>
</div>
<script src="javascripts/angular.min.js"></script>
<script src="javascripts/angular-animate.min.js"></script>
<script src="javascripts/angular-aria.min.js"></script>
<script src="javascripts/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.0/js/mdb.min.js"></script>
<script src="myapp.js"></script>
<script src="filterRiskCtrl.js"></script>
</body>
</html>
package.json:
{
"name": "avrijui",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"angular": "^1.5.9",
"angular-animate": "^1.5.9",
"angular-aria": "^1.5.9",
"angular-material": "^1.1.4",
"body-parser": "~1.17.1",
"cookie-parser": "~1.4.3",
"debug": "~2.6.3",
"ejs": "~2.5.6",
"express": "~4.15.2",
"mdbootstrap": "^4.3.1",
"morgan": "~1.8.1",
"serve-favicon": "~2.4.2"
}
}