CODEWITHSUNDEEP
admin-on-rest
Gopinath Radhakrishnan
Gopinath Radhakrishnan

Reputation: 275

How to customize or update the style of the Datagrid component?

I tried to change the header style of the Datagrid component based on material-ui style guide. Datagrid body content is updated based on custom style but the header is not reflected the custom style changes.

the code snippet is below:

export const TableStyleProp = {
  style: {
    color: "#ff0000"
  },
  selectable: true,
  headerStyle: {
    color: "#ff0000"
  },
  bodyStyle: {}
};


const muiTheme = getMuiTheme({
      table: {
        backgroundColor: "#FF0000 !important"
      },
      thead: {
        backgroundColor: "#b7cbfb"
      },
      tableHeader: {
        borderColor: "#FF0000",
        backgroundColor: "#FF0000"
      },
      tableHeaderColumn: {
        textColor: "#FF0000",
        height: 56,
        spacing: 24
      },
      tableRow: {
        hoverColor: "#FF0000",
        stripeColor: "#FF0000",
        selectedColor: "#FF0000",
        textColor: "#FF00FF",
        borderColor: "#FF0000",
        height: 48
      },
      tableRowColumn: {
        height: 48,
        spacing: 24
      }
    });

<MuiThemeProvider muiTheme={muiTheme}>

Upvotes: 0

Views: 142

Answers (1)

Gildas Garcia
Gildas Garcia

Reputation: 7066

This is described in the documentation: https://marmelab.com/admin-on-rest/List.html#custom-grid-style

Upvotes: 1

Related Questions