setCellHeaderProps modifies the "th", but not the child "span" which has "flex"

## Expected Behavior
setCellHeaderProps should allow centering of the header cell text without breaking the border styling

## Current Behavior
setCellHeaderProps allows centering with flex, but misaligns the bottom border

## Steps to Reproduce (for bugs)

The highlighted line enables centered text, but causes a misaligned border (border line shifts up a few pixels)


Border misaligned:


However, if you manually set "justify-content: center" on the child "span" tag using dev tools, you get the correct centering without any misaligned border:


Centered without bottom border misalignment:


## TL;DR ... final questions...

1. Is there a way to set the style props on the child `span` within the `th`?
1. Is there some other way to center the text of a header cell without misaligning the bottom border?

## Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 4.9.10 |
| MUI-datatables | 2.14.0 |
| React | 16.13.1 |
| browser | Chrome |

Start by tracing how setCellHeaderProps is applied when rendering header cells, then inspect the generated th and child span styles in the table header. Reproduce the centered-header case in Chrome and verify that centering the text no longer shifts the bottom border; add or update a regression test if the repository has coverage for header styling.

Written by the indexing model from the issue text.