React / Material UI - <CardHeader> css

Question

Using React & Material UI I'm trying to layout 3 divs within a <Card> <CardHeader/> such that it has a left, center and right alignment respectively as shown below.

The change is trivial, I need to remove the padding and change to display: inherit but it seems this <div> exists between the exposed style & titleStyle for <CardHeader> and <CardHeader title={someElement}/>

The hierarchy looks like:
...<div><div.myCardHeader><div><span><myTitleElement>...

Being so new to React and styles, I'm unsure how to get to it. Some representative code follows.

Thanks for help.

// @flow
import React, { Component } from 'react';
import Paper from 'material-ui/Paper';
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';

const style = {
  paper: {
    height: 250,
    width: 200,
    margin: 20,
  },
  card: {
    header: {
      container: {
        display: 'flex',               /* establish flex container */
        justifyContent: 'space-between',
        backgroundColor: 'lightblue'
      },
      padding: 1,
      height: 26
    }
  }
};

const POCardTitle = () => (
  <div className="myContainer" style={style.card.header.container}>
    <div style={{ width: 25, height: 26, border: '2px dashed red' }}> - </div>
    <div style={{ width: 25, height: 26, border: '2px dashed blue' }}> - </div>
    <div style={{ width: 25, height: 26, border: '2px dashed green' }}> - </div>
  </div>
);

export default class POCard extends Component {

  render() {
    return (
      <div>
        <Paper style={style.paper} zDepth={2} >
          <Card >
            <CardHeader className="myCardHeader"
              style={style.card.header}
              titleStyle={{ paddingRight: 0, display: 'inline' }}
              title={<POCardTitle />}
            />
          </Card>
        </Paper>
      </div>
    );
  }
}

Answer 1

I managed to get there courtesy of https://www.styled-components.com

and the following:

const StyledHeader = styled(CardHeader) `
  padding: 0px !important;
  height: 26px !important;
  > div {
    display: inherit !important;
    padding-right: 0px !important;
  }
`;

I could find no other way to get to the "first div " after the component through regular CSS...