Properties.tsx

import * as React from 'react';
import { withStyles, WithStyles } from 'material-ui/styles';

import Grid from 'material-ui/Grid';

const styles = (theme) => ({
    propertiesContainer: {
        // marginTop: '1rem',
        // marginBottom: '0',
    },
    propertiesRow: {
        /* tslint:disable */
        'marginTop': '2px',
        'marginBottom': '2px',
        '& > *:first-child': {
            borderRight: 'solid 2px white',
        },
        '&:nth-child(even)': {
            backgroundColor: '#f8f7f5',
        },
        '&:nth-child(odd)': {
            backgroundColor: '#f3f2ee',
        },
        /* tslint:enable */
    },
    propertiesValue: {
      overflowX: 'hidden' as 'hidden',
    },
});

interface IItemProps extends React.ClassAttributes<any> {
    // classes: any;
    title: any;
    // children: any;
}

class PropertiesItem1 extends React.Component<IItemProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {

    public render() {
        const { title, classes, children } = this.props;
        return (
            <Grid container spacing={ 0 } className={ classes.propertiesRow }>
                <Grid item xs={ 4 } md={ 3 } className="font-bold p-halfrem">{ title }</Grid>
                <Grid item xs={ 8 } md={ 9 } className={ `${classes.propertiesValue} p-halfrem` }>{ children }</Grid>
            </Grid>
        );
    }
}

interface IProps extends React.ClassAttributes<any> {
    // classes: any;
    // children: any;
}

class Properties1 extends React.Component<IProps & WithStyles<'propertiesContainer' | 'propertiesRow' | 'propertiesValue'>, any> {
    public render() {
        const { children, classes} = this.props;
        return (
            <Grid container spacing={ 0 }>
                <Grid item xs={ 12 } className={ classes.propertiesContainer }>
                    { children }
                </Grid>
            </Grid>
        );
    }
}

const styledProperties = withStyles(styles)(Properties1);
const styledPropertiesItem = withStyles(styles)(PropertiesItem1);

export { styledProperties as Properties, styledPropertiesItem as PropertiesItem };