react-bootstrap中如何通过style属性修改Pagination.Item颜色？

绝大多数场景下你用的是React Bootstrap封装的Pagination组件，Pagination.Item默认渲染结构是外层<li>容器包裹内层<a>/<button>交互元素，你之前直接传入的style属性只会绑定到外层<li>上，内层交互元素自带默认文字、背景样式，会覆盖外层容器的样式继承效果；另外组件本身没有暴露color属性，直接传color={...}会被组件直接忽略，这就是你之前所有修改都不生效的核心原因。

组件本身提供了专门透传内联样式到内层交互节点的属性，直接对应属性传style对象即可：

• 普通状态下的颜色修改，用linkStyle属性传样式对象，直接控制实际显示内容的文字、背景、边框颜色
• 选中（active）状态的颜色修改，用activeLinkStyle属性传样式对象
• 禁用（disabled）状态的颜色修改，用disabledLinkStyle属性传样式对象

示例代码：

<Pagination>
  <Pagination.Item
    // 外层li的样式，仅需要调整容器边距、定位这类属性时使用
    style={{ margin: '0 2px' }}
    // 普通态样式：黑底白字
    linkStyle={{
      backgroundColor: 'black',
      color: 'white',
      borderColor: '#222'
    }}
    // 选中态样式：红底白字
    activeLinkStyle={{
      backgroundColor: '#c8232c',
      color: '#ffffff',
      borderColor: '#c8232c'
    }}
    // 禁用态样式：灰底灰字
    disabledLinkStyle={{
      backgroundColor: '#eee',
      color: '#999',
      borderColor: '#ddd'
    }}
  >
    1
  </Pagination.Item>
</Pagination>

内联样式的优先级默认高于不带!important的外部CSS，只要样式是通过linkStyle这类属性绑定到实际渲染的交互节点上，就不会被组件默认样式覆盖，不需要额外加CSS选择器或者提升优先级。

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