CODEWITHSUNDEEP
javascriptreactjsmaterial-uiresponsive-design
praveen sonkusare
praveen sonkusare

Reputation: 11

how to change the color of when hover in the datagrid

I need to change the color of Datagrid while hovering on the grid is any way to change the color.

"By default, it's showing light blue color so I need to change it to any other color please help me if somebody knows it"

Somebody body has hover property documents for the material-ui it will help for me......

import * as React from 'react';
import { DataGrid, GridColDef, GridValueGetterParams } from '@mui/x-data-grid';
import { makeStyles } from '@material-ui/core';
import { ClassNames } from '@emotion/react';

const useStyles = makeStyles((theme) => ({
  hover: {
    "&:hover": {
      backgroundColor: "green !important",
    },
  },
}));

const columns: GridColDef\[\] = \[
  { field: 'id', headerName: 'ID', width: 90 },
  {
    field: 'firstName',
    headerName: 'First name',
    width: 150,
    editable: true,
  },
  {
    field: 'lastName',
    headerName: 'Last name',
    width: 150,
    editable: true,
  },
  {
    field: 'age',
    headerName: 'Age',
    type: 'number',
    width: 110,
    editable: true,
  },
  {
    field: 'fullName',
    headerName: 'Full name',
    description: 'This column has a value getter and is not sortable.',
    sortable: false,
    width: 160,
    valueGetter: (params: GridValueGetterParams) =>
      `${params.row.firstName || ''} ${params.row.lastName || ''}`,
  },
\];

const rows = \[
  { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 },
  { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 },
  { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 },
  { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 },
  { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null },
  { id: 6, lastName: 'Melisandre', firstName: null, age: 150 },
  { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 },
  { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 },
  { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 },
\];

export default function DataGridDemo() {
  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        pageSize={5}
        rowsPerPageOptions={\[5\]}
        checkboxSelection
        disableSelectionOnClick
      />
    </div>
  );
}]

Upvotes: 1

Views: 7183

Answers (1)

smith chokshi
smith chokshi

Reputation: 236

You can change the backgroundColor using sx prop provided by Mui.

sx={{
  "& .MuiDataGrid-row:hover": {
    backgroundColor: "skyblue"
    // color: "red"
  }
}}

Codesandbox Link: https://codesandbox.io/s/adoring-bassi-t26bby?file=/src/App.js

Upvotes: 5

Related Questions