在Ant Design组件库中，Table是我们经常用到的一个组件。但是与Bootstrap不同，要为Ant Design的组件修改样式并不是简单添加一个类名可以解决的。

在官方文档中，我们可以看到table有rowClassName这个属性：

利用这个属性，我们可以给奇数行或者偶数行添加相应的class以达到斑马纹效果。

    <Table
      columns={columns}
      dataSource={dataSource}
      rowClassName={record => {
        if (record.key % 2 === 1) {
          return 'zebra-highlight'
        }
      }}
    />

这里record是table中的每一行数据，相应数据中我们都需要定义key，而利用key，我们可以计算获知该行是奇数行或是偶数行，即if (record.key % 2 === 1)这部分的含义。

下面我给出一个数据例子：

    const recentMatches = [{
        key: 1,
        time: '14:00',
        ht: '英格兰',
        score: '1 : 1',
        at: '苏格兰',
        matchId: 123,
      }, {
        key: 2,
        time: '16:00',
        ht: '丛林狼',
        score: '3 : 1',
        at: '森林湖',
        matchId:456,
      }, {
        key: 3,
        time: '18:00',
        ht: '格林兰',
        score: '1 : 5',
        at: '纽芬兰',
        matchId: 789,
      }, ]

可以看到，每一个数据都有相应的key。

这样，我们在render()之后，相应的class就会被添加到对应行中。
接下来，我们只需要给我们的class定义style即可：

.zebra-highlight {
    background: #ccc;
}

这样一来，我们的斑马纹就出现了！