Next.js中React Bootstrap Pagination样式异常问题求助

在Next.js项目中使用React Bootstrap的Pagination组件时，仅在组件对应的Pagination.scss中嵌套引入@import "~bootstrap/scss/bootstrap";，会导致分页按钮的禁用（disabled）与激活（active）状态无法正常显示，page-link元素也缺失禁用样式；但将该样式全局引入到app.scss时一切正常。

父组件代码 #

<div className="pages">
  <Paginate
    count={totalElements}
    recordSize={20}
    currentPage={page}
    click={(page) => {
      console.log(page);
      getAllCoach(page);
    }}
  />
</div>

Paginate子组件代码 #

import Pagination from "react-bootstrap/Pagination";

function Paginate(props) {
  const amountPages = Math.ceil(props.count / props.recordSize);
  let next = props.currentPage + 1;
  let prev = props.currentPage - 1;

  return amountPages > 1 ? (
    <div className="pagination-block flex-vertical-center">
      <Pagination>
        <Pagination.Prev
          disabled={props.currentPage === 1 ? true : false}
          onClick={() => {
            props.click(props.currentPage - 1);
          }}
        />
        {props.currentPage !== 1 ? (
          <Pagination.Item
            active={1 === props.currentPage}
            onClick={() => {
              props.click(1);
            }}
          >
            1
          </Pagination.Item>
        ) : (
          ""
        )}
        {prev - 1 > 1 ? <Pagination.Ellipsis /> : ""}
        {props.currentPage !== 1 && prev !== 1 ? (
          <Pagination.Item
            active={props.currentPage === prev}
            onClick={() => {
              props.click(prev);
            }}
          >
            {prev}
          </Pagination.Item>
        ) : (
          ""
        )}
        <Pagination.Item
          active={props.currentPage}
          onClick={() => {
            props.click(props.currentPage);
          }}
        >
          {props.currentPage}
        </Pagination.Item>
        {props.currentPage !== amountPages && next !== amountPages ? (
          <Pagination.Item
            active={props.currentPage + 1 === props.currentPage}
            onClick={() => {
              props.click(props.currentPage + 1);
            }}
          >
            {props.currentPage + 1}
          </Pagination.Item>
        ) : (
          ""
        )}
        {next + 1 < amountPages ? <Pagination.Ellipsis /> : ""}
        {props.currentPage !== amountPages ? (
          <Pagination.Item
            active={amountPages === props.currentPage}
            onClick={() => {
              props.click(amountPages);
            }}
          >
            {amountPages}
          </Pagination.Item>
        ) : (
          ""
        )}
        <Pagination.Next
          disabled={props.currentPage === amountPages ? true : false}
          onClick={() => {
            props.click(props.currentPage + 1);
          }}
        />
      </Pagination>
    </div>
  ) : (
    ""
  );
}

Pagination.scss代码（原问题版本） #

.pages {
  margin-top: 16px;
  @include flexBox(center, center);
  @import "~bootstrap/scss/bootstrap";
  .pagination-block {
    .pagination {
      display: flex;
      list-style: none;
      padding-left: 0;
    }
  }
}

问题对比 #

• 局部引入样式时：
• 全局引入样式时：

解决方案 #

问题根源 #

将Bootstrap样式嵌套在.pages类内部引入时，Bootstrap的原CSS选择器会被自动添加.pages前缀（如.pages .page-item.active），但React Bootstrap生成的分页DOM元素的类名层级无法匹配该嵌套选择器，导致样式无法生效。

具体解决方法 #

1. 移除外层嵌套，全局引入Bootstrap样式（推荐）

将Bootstrap样式引入放在SCSS文件最外层，避免嵌套：

@import "~bootstrap/scss/bootstrap";

.pages {
  margin-top: 16px;
  @include flexBox(center, center);
  .pagination-block {
    .pagination {
      display: flex;
      list-style: none;
      padding-left: 0;
    }
  }
}

2. 按需引入Bootstrap分页相关样式

如果不想引入完整Bootstrap，仅导入分页所需的SCSS模块：

.pages {
  margin-top: 16px;
  @include flexBox(center, center);
  
  // 引入Bootstrap基础依赖
  @import "~bootstrap/scss/functions";
  @import "~bootstrap/scss/variables";
  @import "~bootstrap/scss/mixins";
  
  // 仅导入分页样式
  @import "~bootstrap/scss/pagination";

  .pagination-block {
    .pagination {
      display: flex;
      list-style: none;
      padding-left: 0;
    }
  }
}

3. 使用:global()包裹Bootstrap引入（CSS Modules场景）

若使用Next.js的CSS Modules，用:global()避免类名被哈希化：

.pages {
  margin-top: 16px;
  @include flexBox(center, center);
  
  :global {
    @import "~bootstrap/scss/bootstrap";
  }

  .pagination-block {
    .pagination {
      display: flex;
      list-style: none;
      padding-left: 0;
    }
  }
}

4. 全局导入Bootstrap样式（官方推荐）

在Next.js的_app.js/_app.tsx中全局引入Bootstrap样式，确保所有React Bootstrap组件都能正常获取样式：

// pages/_app.js
import 'bootstrap/dist/css/bootstrap.min.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

内容的提问来源于stack exchange，提问作者Rahil Əliyev