如何使用material-ui从DevExtreme React Grid获取数据表的完全控件样式？

Question

I have trouble with styling DevExtreme React Grid, follow by there found from there documentation here .

Here's the sample code I have from copy some other repo. My questions:

1. How can I get full control on the styling, because I see <Table> component, but is there a way I can adding class to <th>, <td> , I would like to add the class or someway to have full control styling for font size, or hover styling.

2. I had a really hard time my table header, like to change to bold and another background color, it's by material UI

3. After I add the Fixed Columns method on scrolling my table, the style is not matching with my other table row, it's changed to all white background, no grey and white on each row

4. When I hit the rest, I would like to row change to be another color.

Thank you so much for your help!

Answer 1

I checked with their GitHub issues:

Not fully support adding class to the component, but you can create a theme for it.

About fixColumn styling found the demo from this sandbox . Hope this sample help

Pagination issue with sorting can be fixed by this:

//after state area:
changePageSize = pageSize => this.setState({ pageSize });
// Plugin
<PagingState
   defaultCurrentPage={0}
   pageSizes={pageSizes}
   defaultPageSize={15}
   onPageSizeChange={this.changePageSize}
/>
<IntegratedPaging />
//UI 
<PagingPanel pageSizes={pageSizes} />