添加 text-transform: none 和 font-weight :bold 样式到 angular materials design without inline css 中的 <md-buttons>

Question

我正在从事一个使用 angular 材料设计的项目，我想在不使用内联 css 的情况下添加某些样式，但找不到最好的方法。

请注意，我尝试为这些样式添加 class，但默认情况下它是从 .md-button class 中选择样式，而不是选择 Css class 我加了

CSS class

.button__style {
  text-transform :none;
  font-weight :bold;
 }

HTML

<md-button class='button__style'>Click me </md-button>

我也知道我们可以如下操作默认主题颜色，但想知道我是否缺少添加上面需要的两种样式的方法，即文本转换：none 和字体粗细:粗体;

angular.module('myApp', ['ngMaterial'])
 .config(function($mdThemingProvider) {
  $mdThemingProvider.theme('default')
   .primaryPalette('pink')
   .accentPalette('orange');
});

Answer 1

你的HTML

<div class='button__style'>
<md-button >Click me </md-button>
</div>

在你的 CSS 中：

.button__style {
    button {
        text-transform: none;
        font-weight :bold;
//or any style you want to apply
        }
}

试试这个。

Code pen example for your problem

添加 text-transform: none 和 font-weight :bold 样式到 angular materials design without inline css 中的 <md-buttons>

Add text-transform: none and font-weight :bold styles to <md-buttons> in angular materials design without inline css

angular-material