Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 设置角材质分页器的样式_Html_Css_Angular_Angular Material_Angular Material Paginator - Fatal编程技术网

Html 设置角材质分页器的样式

Html 设置角材质分页器的样式,html,css,angular,angular-material,angular-material-paginator,Html,Css,Angular,Angular Material,Angular Material Paginator,我有一个有角度的材质分页器,看起来像 我想设计它,它应该看起来像 我现在很难给它定型。我只是能够移动分页器中的元素(开始和结束位置),除此之外,我无法修改任何内容 请让我知道如何做所需的造型 以下是stackblitz链接如果您对组件使用单独的样式,并且希望在设置子组件选择器的样式之前,在您的css样式:ng deep中使用样式子组件,例如: ::ng-deep .mat-select-value { border: 1px solid red!important; } 使用此css(

我有一个有角度的材质分页器,看起来像

我想设计它,它应该看起来像

我现在很难给它定型。我只是能够移动分页器中的元素(开始和结束位置),除此之外,我无法修改任何内容

请让我知道如何做所需的造型


以下是stackblitz链接

如果您对组件使用单独的样式,并且希望在设置子组件选择器的样式之前,在您的
css
样式
:ng deep
中使用样式子组件,例如:

::ng-deep .mat-select-value {
  border: 1px solid red!important;
}
使用此css(对于更多样式,请打开F12并覆盖材质声明):


对于标题修改,您应提供MatPaginatorIntl

请在stackblitz fork中分享您的代码,并向我们展示链接:这是我们可以帮助您的唯一方式(请输入blitz only相关代码)开始吧,我想将表中的分页器样式设置为我的问题所示的目标分页器@לבנימכהnice!将此链接添加到问题我已添加此链接!非常感谢您的帮助和如此快速的响应!但是如果你看到目标分页器,它有40个项目中的1-15个。所以现在代码显示为11中的1-10。如何添加此“项目”。此外,导航箭头应移到右侧。谢谢!是否有办法在11个选项中的1-10个之后添加“项目”?它看起来应该是11项中的1-10项我认为你无法控制它是的。。。我想是吧!
::ng-deep .mat-paginator-page-size-select {
    width: 27px!important;
}
::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline {
    background-color: transparent;
}

::ng-deep .mat-select-value {
  color: #005999;
    font-weight: bold;
    font-size: 15px;
}
::ng-deep .mat-select-arrow {
    color: #005999;
}
::ng-deep .mat-option{
  padding: 0!important;

}
::ng-deep .mat-option-text {

    text-align: right;
}