更改 md-tabs 按钮高度

Question

我想将我的选项卡按钮更改为 small/thinner。然后我通过 DOM 获取 css 的所有指针，例如：

md-tabs-canvas.md-center-tabs{
height: 10px;
}
md-tabs-wrapper{height: 10px;}
md-pagination-wrapper{height: 3px;}

但是我无法达到我想要的高度。 或者我需要用 ng-isolate-scope CSS 做些什么，比如重新排列这个指针的命题？

更新

这是码笔的码 http://codepen.io/tom031/pen/EZZweq

这是生产中的代码https://tom031.github.io/

Answer 1

更新：

我试图在您的 GitHub 页面上更改 md-tab-item 的填充，并且有效。 在屏幕截图中看到它：screenshot。是md-tab-item的padding让元素变大了

将 css 更改为：

md-pagination-wrapper {
    height: 30px;
}
md-tab-item {
    padding: 5px !important;
}

Answer 2

我验证了上面的答案，效果很好。但是，为避免更改过于通用从而影响 md-tabs 的每个实例，并避免需要 !important，请使用自定义父容器 ID 限定 CSS class 或class。

此外，如果您只想影响高度，则只需修改 padding-top，例如：

#myTabsContainerParent .md-pagination-wrapper {
    height: 30px;
}
#myTabsContainerParent .md-tab-item {
    padding-top: 5px;
}