英文:
Ngx-Pagination change default blue color to other color
问题
I am using ngx-pagination in my Angular 16 application and I want to customize the default blue color to another color. Can anyone help me?
Html code:
<div>
<pagination-controls></pagination-controls>
</div>
CSS:
.ngx-pagination .current{
color: #ffffff !important;
background-color: red !important;
}
Tried with the above and similar CSS, but it does not work. Any help will be appreciated.
英文:
I am using ngx-pagination in Angular 16 application and I want to customize the default blue color into another , Can anyone help me.
Html code:
<div>
<pagination-controls></pagination-controls>
</div>
CSS
.ngx-pagination .current{
color: #ffffff !important;
background-color: red !important;
}
Tried with above and similar css, it do not works.
Any help will be appreciated.
答案1
得分: 0
尝试这些更改：
/* 更改当前页面的背景颜色 */
.pagination-current {
background-color: red !important;
}
/* 更改当前页面的文本颜色 */
.pagination-current a {
color: #ffffff !important;
}
/* 更改页面按钮的背景颜色 */
.pagination-controls button {
background-color: red !important;
}
如果不起作用，意味着我想进一步检查您的代码行。
英文:
Try these changes ,
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/* Change the background color of the current page */
.pagination-current {
background-color: red !important;
}
/* Change the text color of the current page */
.pagination-current a {
color: #ffffff !important;
}
/* Change the background color of the page buttons */
.pagination-controls button {
background-color: red !important;
}
<!-- end snippet -->
If it is not working means , I want to Inspect your line of code further more
答案2
得分: 0
以下是已翻译的内容：
HTML
<pagination-controls class="my-pagination"><pagination-controls>
CSS
.my-pagination ::ng-deep .ngx-pagination .current {
background: red;
}
英文:
It worked after below changes.
HTML
<pagination-controls class="my-pagination"><pagination-controls>
CSS
.my-pagination ::ng-deep .ngx-pagination .current {
background: red;
}
答案3
得分: 0
Your code is correct, and it should work. The only thing you need to ensure is that you place the CSS class correctly. It should not be at the component level where you are using ngx-pagination.
你的代码是正确的，它应该可以工作。唯一需要确保的是正确放置CSS类。它不应该在你使用ngx-pagination的组件级别。
You have two options for placing the CSS class correctly:
你有两种选项来正确放置CSS类：
Add the CSS class to the style.css file: You can add the following code to the style.css file in your Angular project:
将CSS类添加到style.css文件中：您可以将以下代码添加到您的Angular项目中的style.css文件中：
.ngx-pagination .current {
color: #ffffff !important;
background-color: red !important;
}
Or create a new file and import it into style.css like this.
或者创建一个新文件，并像这样将其导入到style.css中。
@import 'path/to/pagination-customization.css';
There is an official live demo with my changes in style.css, have a look, please.
有一个官方的在线演示，其中包含我在style.css中的更改，请查看：
https://angular-zgr18t.stackblitz.io
英文:
Your code is correct, and it should work. The only thing you need to ensure is that you place the CSS class correctly. It should not be at the component level where you are using ngx-pagination.
You have two options for placing the CSS class correctly:
Add the CSS class to the style.css file: You can add the following code to the style.css file in your Angular project:
.ngx-pagination .current {
color: #ffffff !important;
background-color: red !important;
}
Or create new file and import into style.css like this.
@import 'path/to/pagination-customization.css';
there is oficial live demo with my changes in style.css have a look pls.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论