Setting styles on Office UI Fabric components in React project

Question

I believe I understand how to use styling for Office UI React components, but I'm not sure of the correct approach. If I try to set the styles property, I get a TS2339 compile error, as per below (in WebStorm), on both the TextField and DetailsList components. If I try to set the componentRef property, the style doesn't show up when inspecting the element.

What am I doing wrong? I simply want to set the height for DetailsList (it doesn't matter for TextField, but I'm setting the same style there to illustrate that the error is not for a specific component).

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>
    );
}}

Answer 1

The <DetailsList> fabric component has only "className" attribute, according to its interface IDetailsListProps .

So you should create css/sass classes and then use it in DetailsList component, or just reuse alredy exist fabric classes, maybe they could help you: https://developer.microsoft.com/en-us/fabric#/styles/typography and https://developer.microsoft.com/en-us/fabric#/styles/layout

Regular html components can be used used with "style" attribute, in your case it will be <div style={{height: '200px'}} />

Ayway I suggest to use TypeScript to see all component properties via interfaces