CardSection.tsx

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

// region component styles
const styles = createStyles({
    root: {
        display: 'flex',
        margin: '10px'
    },
    icon: {
        flex: '0 0 auto',
        marginRight: '16px'
    },
    content: {
        flex: '1 1 auto'
    }
});
// endregion
// region component props
interface ExternalProps {
    classes?: Partial<ClassNameMap<keyof typeof styles>>;

    icon: React.ComponentType;
}

type InternalProps = Required<ExternalProps>;

type Props =
    & InternalProps
    & WithStyles<typeof styles>
    ;

interface State {

}

// endregion

/**
 *
 */
class CardSection extends withStyles(styles)(new () => React.Component<Props, State>) {
    static readonly defaultProps = {};

    readonly state: State = {};

    // region render & get-render-content methods
    render() {
        return (
            <div className={this.props.classes.root}>
                <div className={this.props.classes.icon}>
                    <this.props.icon />
                </div>
                <div className={this.props.classes.content}>
                    {this.props.children}
                </div>
            </div>
        );
    }

    // endregion
}

// export default withStyles(styles)(CardSection);
export default CardSection;