Установка стилей для компонентов Office UI Fabric в проекте React

Мне кажется, я понимаю, как использовать стили для компонентов Office UI React, но не уверен в правильном подходе. Если я попытаюсь установить свойство стилей, я получу ошибку компиляции TS2339, как показано ниже (в WebStorm), для компонентов TextField и DetailsList. Если я попытаюсь установить свойство componentRef, стиль не будет отображаться при проверке элемента.

Что я делаю неправильно? Я просто хочу установить высоту для DetailsList (это не имеет значения для TextField, но я устанавливаю тот же стиль, чтобы проиллюстрировать, что ошибка не для конкретного компонента).

import * as React from 'react'
import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import {DetailsList, DetailsListLayoutMode, IColumn, SelectionMode} from "office-ui-fabric-react/lib/DetailsList";
import {TextField} from 'office-ui-fabric-react/lib/TextField';
const _columns: IColumn[] = [
{
    key: 'projectNameColumn',
    name: 'Project',
    fieldName: 'name',
    minWidth: 100,
    maxWidth: 200,
    isResizable: true,
    ariaLabel: 'Operations for Project'
}];

export interface ProjectListItem {
id: string;
name: string;
}

export interface AppState {
projectItems: ProjectListItem[];
}

export default class DetailsListTest extends React.Component<any, AppState> {
constructor(props, context) {
    super(props, context);
    this.state = {
        projectItems: []
    };
}
componentDidMount() {

    this.setState(
        {
        projectItems: [
            {id: '0', name: 'ABC Construction'},
            {id: '1', name: 'Air Bee and Bee'},
            {id: '2', name: 'Architectural Salvage'},
            {id: '3', name: 'Arkham Airport'},
            {id: '4', name: 'Arkham Assembly Hall'},
            {id: '5', name: 'Arkham Library'},
            {id: '6', name: 'zArkham Renovation'},
            {id: '7', name: 'Foo'},
            {id: '8', name: 'Foo'},
            {id: '9', name: 'Foo'},
            {id: '10', name: 'Foo'},
            {id: '11', name: 'Foo'},
            {id: '12', name: 'Foo'},
            {id: '13', name: 'Foo'},
            {id: '14', name: 'Foo'},
            {id: '15', name: 'Foo'},
            {id: '16', name: 'Foo'},
            {id: '17', name: 'Foo'},
        ]
    });
}

render() {

    const getStyles = () => {
        return {
            root: {
                height: '200px'
            }
        }
    };

    return (
        <Fabric>
            <TextField
                id='myTextField'
                name='bar'
                placeholder='Placeholder text'
                defaultValue='Default text'
                styles={getStyles} /*TS2339 Property 'styles' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<DetailsList> & Readonly<{ children?:ReactNode; }>...'.*/
            />
            <DetailsList
                styles={getStyles} /*TS2339 Property 'styles' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<DetailsList> & Readonly<{ children?:ReactNode; }>...'.*/
                items={this.state.projectItems}
                columns={_columns}
                setKey='set'
                layoutMode={DetailsListLayoutMode.fixedColumns}
                selectionMode={SelectionMode.single}
                isHeaderVisible={true}
                selectionPreservedOnEmptyClick={true}
                enterModalSelectionOnTouch={true}
            />
        </Fabric>
    );
}}