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

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

0 голосов
/ 18 сентября 2018

Мне кажется, я понимаю, как использовать стили для компонентов Office UI React, но я не уверен в правильном подходе.Если я пытаюсь установить свойство styles, я получаю ошибку компиляции 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>
    );
}}

1 Ответ

0 голосов
/ 20 сентября 2018

Компонент <DetailsList> fabric имеет только атрибут "className", в соответствии с его интерфейсом IDetailsListProps.

Поэтому вы должны создать классы css / sass и затем использовать его в компоненте DetailsList, или простоповторно использовать уже существующие классы фабрики, возможно, они могут вам помочь: https://developer.microsoft.com/en-us/fabric#/styles/typography и https://developer.microsoft.com/en-us/fabric#/styles/layout

Можно использовать обычные html-компоненты с атрибутом "style", в вашем случае это будет <div style={{height: '200px'}} />

Да, я предлагаю использовать TypeScript, чтобы увидеть все свойства компонентов через интерфейсы

...