Office ui fabric 更改DetailsList的行高度

如何更改DetailsList行的行高？我可以通过设置参数true使行紧凑？我可以进一步降低高度吗，比如一排桌子

---

我试图在IDetailsRowStyle单元格中修改maxHeight。但是它的尺寸还是一样的。

天哪，他们不容易做到，是吗？我也有同样的问题，经过几个小时的实验，终于找到了正确的组合。这将在所有单元格上提供非常紧密的间距，以便您可以在每个单元格内执行任何操作。希望1.5年后这对你（或其他人）仍然有用

import * as React from 'react';
import { DetailsList, IDetailsHeaderProps, IDetailsListProps, IRenderFunction, ScrollablePane, Sticky } from '@fluentui/react';

export interface IDataGridProps extends IDetailsListProps
{
    RowHeight?: number
}

export class DataGrid extends React.Component<IDataGridProps>
{
    render()
    {
        return (
            <ScrollablePane>
                <DetailsList
                    cellStyleProps={{
                        cellLeftPadding: 0,
                        cellRightPadding: 0,
                        cellExtraRightPadding: 0,
                    }}
                    useReducedRowRenderer={this.props.useReducedRowRenderer}
                    compact={true}
                    onRenderDetailsHeader={
                        // tslint:disable-next-line:jsx-no-lambda
                        (detailsHeaderProps?: IDetailsHeaderProps, defaultRender?: IRenderFunction<IDetailsHeaderProps>) => (
                            <Sticky>
                                {defaultRender ? defaultRender(detailsHeaderProps) : (<></>)}
                            </Sticky>
                        )}
                    onRenderRow={(props, defaultRender) =>
                    {
                        if (!props)
                            return null;
                        props.styles = {
                            cell: {
                                paddingTop: 0,
                                paddingBottom: 0,
                                minHeight: 0,
                                height: this.props.RowHeight || 32,
                                alignSelf: "center"
                            },
                            root: {
                                height: this.props.RowHeight || 32,
                                minHeight: 0,
                                // Optionally draw your own grid lines here 
                                // because we used compact mode
                                //borderColor: "gray",
                                //borderWidth: "0px 0px 1px 0px",
                                //borderStyle: "solid"
                            },
                            checkCell: {
                                height: this.props.RowHeight || 32,
                                minHeight: 0
                            },
                        };
                        return defaultRender ? defaultRender(props) : (<></>);
                    }}
                    constrainMode={this.props.constrainMode}
                    layoutMode={this.props.layoutMode}
                    items={this.props.items || []}
                    columns={this.props.columns} />
            </ScrollablePane>);
    }
}

否则，复选框将无法与行正确对齐

.ms-DetailsRow-check.ms-Check-checkHost {
    height: 100%;
}