React material-ui: centering items on Toolbar

Question

I am trying to implement a toolbar on a page in which I have three ToolbarGroup components:

            <Toolbar>
                <ToolbarGroup firstChild={true} float="left">
                    {prevButton}
                </ToolbarGroup>

                <ToolbarGroup>
                    {releaseBtn}
                </ToolbarGroup>

                <ToolbarGroup lastChild={true} float="right">
                    {nextButton}
                </ToolbarGroup>
            </Toolbar>

The general idea is that prevButton should render all the way to the left of the toolbar (it does), nextButton should render all the way to the right (it does)... and that releaseBtn should be centered on the toolbar (not currently happening).

Per the material-ui docs there doesn't appear to be some easy setting for centered={true}-- how can I accomplish this?

I've tried manually setting the style on the middle ToolbarGroup to margin: 0px auto but that doesn't seem to help.

Answer 1

The final solution for me was to do this:

            <Toolbar>
                <ToolbarGroup firstChild={true} float="left">
                    {prevButton}
                </ToolbarGroup>

                <ToolbarGroup style={{ 
                    float       : 'none', 
                    width       : '200px',
                    marginLeft  : 'auto',
                    marginRight : 'auto'
                }}>
                    {releaseBtn}
                </ToolbarGroup>

                <ToolbarGroup lastChild={true} float="right">
                    {nextButton}
                </ToolbarGroup>
            </Toolbar>

I first had to set the middle ToolbarGroup with no float (not an option through the material-ui props) and then play with the width/margins. I imagine your mileage may vary depending on what you shove inside the ToolbarGroup.