0

I am trying to use AngularJS Material. However, I am unable to customize the text color and styles.

I have tried different things, such as MDBootstrap, md-color, and basic html style color, but nothing seems to have an impact on the label values.

This is especially in the second <md-toolbar> defined.

I have checked these posts but they did not help.

post1

post2

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"
  }
}
Community
  • 1
  • 1
SAS
  • 13
  • 6

1 Answers1

1

Angular Material uses themes to configure the colours on the widgets. You can customise your themes across the whole app using the $mdThemingProvider.

See the documentation here: https://material.angularjs.org/latest/Theming/03_configuring_a_theme

Alternatively, you can just overwrite the styles with your own css. You just have to make sure your classes are specific enough. It can also become quite annoying having to handle the edge cases (field in error, field disabled, etc.). If you spend some time up front, theming is definitely better in the long run.

ash
  • 282
  • 1
  • 6