How to rewrite styles of #devexpress/dx-react-grid-material-ui? - reactjs

Question

Is there any way to rewrite styles of TableSummaryRow from '#devexpress/dx-react-grid-material-ui' library?
What I have: a component which renders table (using '#devexpress/dx-react-grid-material-ui' library) and in the last row outputs the total number of rows in the table.
What I need to do: style table cell in which TableSummaryRow renders result.
I already tried this solution, but it don't work for me.
Here is simpifide code of my component:
import React from 'react';
import { SummaryState } from '#devexpress/dx-react-grid';
import {
TableHeaderRow,
TableSummaryRow
} from '#devexpress/dx-react-grid-material-ui';
import { ExtendedGrid } from 'components/DxGrid/index';
const Table = ({ rows }) => (
<ExtendedGrid rows={rows} columns={reportColumns}>
<SummaryState totalItems={[{ columnName: 'userName', type: 'count' }]} />
<TableHeaderRow />
<TableSummaryRow messages={{ count: 'Number of rows' }} />
</ExtendedGrid>
);
export default Table;

Answer 1

I figured out this by myself, maybe it will be useful for somebody.
This official docs page helped me. So I used makeStyles method.
Here is working DEMO.
And the final component (based on Andrei Konstantinov's answer) code:
import React from "react";
import { render } from "react-dom";
import Paper from "#material-ui/core/Paper";
import { makeStyles } from "#material-ui/styles";
import { SummaryState, IntegratedSummary } from "#devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
TableSummaryRow
} from "#devexpress/dx-react-grid-material-ui";
const useStyles = makeStyles({
root: {
"& tfoot": {
"& td": {
background: "linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)",
"&:empty": {
background: "none"
}
}
}
}
});
const Hook = () => {
const data = {
totalSummaryItems: [{ columnName: "weight", type: "sum" }],
columns: [
{ name: "name", title: "Name" },
{ name: "weight", title: "Weight" }
],
rows: [
{ name: "Sandra", weight: 123 },
{ name: "Andy", weight: 9000 },
{ name: "Einstein", weight: 56 },
{ name: "Bob", weight: 11 }
]
};
const { rows, columns } = data;
const classes = useStyles();
return (
<Paper className={classes.root}>
<Grid rows={rows} columns={columns}>
<SummaryState totalItems={data.totalSummaryItems} />
<IntegratedSummary />
<Table />
<TableHeaderRow />
<TableSummaryRow messages={{ sum: "Total weight of the group" }} />
</Grid>
</Paper>
);
};
render(<Hook />, document.getElementById("root"));

Answer 2

According to TableSumRow's docs you need to use SummaryState component.
Also, for some reason, I can't make it work without IntegratedSummary component as well, even if it's marked as optional.
You can find working demo here.
And here is a code from demo. There is a total weight row for the whole team.
import React from "react";
import { render } from "react-dom";
import { SummaryState, IntegratedSummary } from "#devexpress/dx-react-grid";
import {
Grid,
Table,
TableHeaderRow,
TableSummaryRow
} from "#devexpress/dx-react-grid-material-ui";
class App extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
totalSummaryItems: [{ columnName: "weight", type: "sum" }],
columns: [
{ name: "name", title: "Name" },
{ name: "weight", title: "Weight" }
],
rows: [
{ name: "Sandra", weight: 123 },
{ name: "Andy", weight: 9000 },
{ name: "Einstein", weight: 56 },
{ name: "Bob", weight: 11 }
]
};
}
render() {
const { rows, columns } = this.state;
return (
<Grid rows={rows} columns={columns}>
<SummaryState totalItems={this.state.totalSummaryItems} />
<IntegratedSummary />
<Table />
<TableHeaderRow />
<TableSummaryRow messages={{ sum: "Total weight of the group" }} />
</Grid>
</Paper>
);
}
}
render(<App />, document.getElementById("root"));