如何使用FixedDataTable库左对齐单元格

Question

我试图在我的FixedDataTable实现中左对齐单元格值。以下是我正在使用的代码：

require('./app.css');
require('fixed-data-table/dist/fixed-data-table.min.css');
const     $ = require('jquery');
const React = require('react');

import {Table, Column, Cell} from 'fixed-data-table';



const App = React.createClass({
    render: function() {
        return (
                <Table
                    height       = {200}   width     = {200}
                    rowsCount    = { 10}   rowHeight = { 26}
                    headerHeight = {100}>
                    <Column
                        width={100}
                        cell={props=>(<Cell className='align-right'>{props.rowIndex}</Cell>)}
                        align='left'
                        header="Right-aligned values"/>
                    <Column
                        width={100}
                        cell={props=>(<Cell className='align-left'>{2*props.rowIndex}</Cell>)}
                        align='left'
                        header="Left-aligned values"/>
                </Table>
        );
    }
});

export default App;

css文件我require只是：

.align-right {
    align: right;
    text-align: right;
    font-weight: bold;
}

.align-left {
    align: left;
    text-align: left;
    font-style: italic;
}

我得到的是以下内容：

...表明确实应用了样式，但对齐部分除外。

检查div在DOM中创建的各种元素（大多数类型为FixedDataTable），看起来我的类被分配的层次太深而不重要（封闭的div已经左对齐） ）。