如何用Styled Components为React-paginate设置样式？flex布局失效问题

你给外层容器设置display: flex但没生效，核心原因是React-paginate的根渲染元素是<ul>，它默认是块级元素，不会继承外层容器的flex布局规则，必须直接给这个内部的<ul>设置flex属性才能让分页项横向排列。

修改后的Styled Components代码： #

export const PaginationContainer = styled.div`
  font-size: larger;
  color: white;

  // 直接定位React-paginate生成的ul元素，设置flex布局
  > ul {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  // 调整分页项的间距和基础样式
  > ul > li {
    margin: 0 6px;
    cursor: pointer;
  }

  // 可选：给激活的页码加高亮样式
  > ul > li.active a {
    font-weight: bold;
    color: #4285f4;
  }

为什么原来的代码无效？ #

外层容器的display: flex只会作用于它的直接子元素，但React-paginate的直接子元素是<ul>，而<ul>默认是display: block，所以内部的<li>还是会垂直排列。只有给<ul>本身设置display: flex，才能让里面的<li>横向分布。

额外提示 #

如果你的React-paginate引入了官方默认样式（比如import 'react-paginate/lib/react-paginate.css'），记得确保你的自定义样式优先级足够高（比如用子代选择器> ul比类选择器优先级更高），避免被默认样式覆盖。

内容的提问来源于stack exchange，提问作者user3137261