etesync/src/components/PimItemHeader.tsx

import * as React from 'react';

import { Theme, withTheme } from '@material-ui/core/styles';

export default withTheme()((props: {text: string, backgroundColor?: string, children?: any, theme: Theme}) => {
  const style = {
    header: {
      backgroundColor: (props.backgroundColor !== undefined) ?
        props.backgroundColor : props.theme.palette.secondary.main,
      color: props.theme.palette.secondary.contrastText,
      padding: 15,
    },
    headerText: {
      marginTop: 10,
      marginBottom: 10,
    },
  };

  return (
    <div style={style.header}>
      <h2 style={style.headerText}>{props.text}</h2>
      {props.children}
    </div>
  );
});