Question

是否可以通过'@ devexpress / dx-react-grid-material-ui'库重写TableSummaryRow的样式？

我所拥有的：一个呈现表格的组件（使用'@ devexpress / dx-react-grid-material-ui'库），并在最后一行中输出桌子。

我需要做什么：样式表单元格，其中TableSummaryRow呈现结果。

这是我组件的简化代码：

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

根据TableSumRow's docs，您需要使用SummaryState组件。另外，由于某种原因，即使没有IntegratedSummary组件，我也无法使其正常工作，即使它被标记为可选。

您可以找到有效的演示here。

这是演示中的代码。整个团队都有总重量排。

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"));

Answer 2

我自己弄清楚了，也许对某人有用。

This official docs page帮助了我。所以我使用了makeStyles方法。

这里是working DEMO。

最后一个组件（基于Andrei Konstantinov的答案）代码：

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"));

如何重写@ devexpress / dx-react-grid-material-ui的样式？

2 个答案: