如何将活动按钮的颜色更改为自定义？

Question

更改 NextUI 中活动分页按钮的颜色 我正在尝试将 NextUI 库的分页组件中活动按钮的颜色更改为特定的十六进制代码 #2D3748。但是，该库不允许直接通过颜色属性使用十六进制代码。

我为分页组件创建了以下代码，但无法达到预期的结果。

 <div className="flex flex-col gap-5">
      <Pagination
        total={10}
        color="#2D3748"
        page={currentPage}
        onChange={setCurrentPage}
        className={styles.customPagination} // Використання кастомного класу
      />
      <div className="flex gap-2">
        <Button
          size="sm"
          variant="shadow"
          color="secondary"
          onPress={() => setCurrentPage(prev => (prev > 1 ? prev - 1 : prev))}
        >
          Back
        </Button>
        <Button
          size="sm"
          variant="shadow"
          color="secondary"
          onPress={() => setCurrentPage(prev => (prev < 10 ? prev + 1 : prev))}
        >
          Next
        </Button>
      </div>
    </div>

Answer 1

当尝试将 NextUI 中活动分页按钮的颜色更改为自定义十六进制代码（如

#2D3748

）时，

color

属性不直接接受十六进制代码。实现此目的的最佳方法是添加自定义类并使用 CSS 对其进行样式设置。

在您的代码中，您已向分页组件添加了

className

：

<Pagination
  total={10}
  page={currentPage}
  onChange={setCurrentPage}
  className="custom-pagination" 
/>

然后，在 CSS 或样式表中，您可以定位活动分页按钮并设置其颜色：

.custom-pagination .nextui-pagination-item.is-active {
  background-color: #2D3748;
  border-color: #2D3748;
  color: white;
}

这会将活动分页按钮的颜色更改为您所需的十六进制代码。