React / Material UI - <CardHeader> css - 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...