How to Change The Text Color of The Selected Row in Material UI Table

How to change the text color of the selected row in material ui table

The background color is controlled in TableRow. In order to get the correct specificity (you shouldn't ever need to leverage "!important" when overriding Material-UI styles), you need to leverage the "hover" class similar to what is done within TableRow.

The color is controlled in TableCell, so that is the level where you need to control it.

For a working solution, in the styles you would have something like:

const styles = theme => ({
  tableRow: {
    "&$hover:hover": {
      backgroundColor: "blue"
    }
  },
  tableCell: {
    "$hover:hover &": {
      color: "pink"
    }
  },
  hover: {}
});

then in the rendering:

            <TableRow
              hover
              key={row.id}
              classes={{ hover: classes.hover }}
              className={classes.tableRow}
            >
              <TableCell
                className={classes.tableCell}
                component="th"
                scope="row"
              >
                {row.name}
              </TableCell>

Here's a working version based on your sandbox:

Edit Table hover colors

Here's a similar example, but using "selected" instead of "hover":

https://codesandbox.io/s/llyqqwmr79

This uses the following styles:

const styles = theme => ({
  tableRow: {
    "&$selected, &$selected:hover": {
      backgroundColor: "purple"
    }
  },
  tableCell: {
    "$selected &": {
      color: "yellow"
    }
  },
  selected: {}
});

and some state:

 const [selectedID, setSelectedID] = useState(null);

and changing the TableRow rendering to be:

            <TableRow
              hover
              key={row.id}
              onClick={() => {
                setSelectedID(row.id);
              }}
              selected={selectedID === row.id}
              classes={{ selected: classes.selected }}
              className={classes.tableRow}
            >

v4 of Material-UI will include some changes that should make overriding styles considerably easier (and easier to figure out how to do successfully without looking at the source code).

In v4 of Material-UI, we can use the global class names for the selected state ("Mui-selected") and for TableCell ("MuiTableCell-root") and then we only need to apply a single class to TableRow:

const styles = (theme) => ({
  tableRow: {
    "&.Mui-selected, &.Mui-selected:hover": {
      backgroundColor: "purple",
      "& > .MuiTableCell-root": {
        color: "yellow"
      }
    }
  }
});

Edit Table hover colors (forked)

Change color of selected row on Material UI table

You have to pass your styles to the classes props in order to change the styles for the TableRow.

To achieve the background-color change you want to override the default classes: .MuiTableRow-root.Mui-selected and .MuiTableRow-root.Mui-selected:hover.

To override them you have to use a parent reference with a so called $ruleName in your makeStyles hook. Here is a very good explanation from @Ryan Cogswell if you are more interested how it works.

This would then look like this:

const useStyles = makeStyles((theme) => ({
  // your other styles
  ...,
  tableRowRoot: {
    "&$tableRowSelected, &$tableRowSelected:hover": {
      backgroundColor: theme.palette.primary.main
    }
  },
  tableRowSelected: {
    backgroundColor: theme.palette.primary.main
  }
}));

...

<TableRow
  // your other props
  ...
  classes={{
    root: classes.tableRowRoot,
    selected: classes. tableRowSelected,
  }}
>
  ...
</TableRow>;

For the checkboxes, you only have to add the color prop in order to change it:

<Checkbox
  // other props
  ...
  color="primary"
/>

and for your Toolbar, you only need to change the provided highlight class inside your useToolbarStyles in order to get things working:

import { alpha } from "@material-ui/core/styles";

...

const useToolbarStyles = makeStyles((theme) => ({
  ...,
  highlight:
    theme.palette.type === "light"
      ? {
          color: theme.palette.primary.main,
          backgroundColor: alpha(
            theme.palette.primary.light,
            theme.palette.action.selectedOpacity
          )
        }
      : {
          color: theme.palette.text.primary,
          backgroundColor: theme.palette.primary.dark
        },
}));

Live demo:

Edit change-color-of-selected-row-on-material-ui-table

Material UI V5 change color of selected row

You can simply do it by setting the selected property.

You should hole a state for your selected row and then change it on onClick of the table rows:

export default function BasicTable() {
  const [selectedRow, setSelectedRow] = useState(0);
  const handleSelectRow = (rowIndex) => {
    setSelectedRow(rowIndex);
  }

  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
          <TableRow selected={selectedRow === 0} onClick={() => handleSelectRow(0)}>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat (g)</TableCell>
            <TableCell align="right">Carbs (g)</TableCell>
            <TableCell align="right">Protein (g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, index) => (
            <TableRow
              key={row.name}
              sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
              selected={selectedRow === index + 1}
              onClick={() => handleSelectRow(index + 1)}
            >
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

How to change the font color of Material UI table with makeStyles?

you need to modify the root style of TableCell component.
You can modify the font color by changing the root element of TableCell as below:

const useStyles = makeStyles({
  root: {
    color: "red"
  }
});
     ///////other parts of your code///////

          <TableCell className={classes.root} align="right"> 
                {row.protein} 
          </TableCell>

But it needs lots of modifications for every TableCell component that has been used in your code. The best way would be customizing TableCell component and creating new component that font color is changed in it. Like below:

const StyledTableCell = withStyles({
  root: {
    color: "red"
  }
})(TableCell);

sandbox

Selected row color not changed when another row select in Material UI

You have to set the State in the Parentcomponent <Table /> because when you just set the State in each Row the State won't change for the other Rows.

Solution:

Put the State in the <Table />
Pass the setSelectedID as props to the rows (<CustomRow onSelectRow={setSelectedID} />)
Handle onClick with the props.onSelectRow(row.id)
pass the Parents State (selectedID) as props as well and check for props.selectedID === row.id

Complete Example

const Parent = () => {

   const [selectedID, setSelectedID] = useState(null)

   return (
      // ...
      <Row onSelectRow={setSelectedID} selectedID={selectedID} />
      <Row onSelectRow={setSelectedID} selectedID={selectedID} />
      <Row onSelectRow={setSelectedID} selectedID={selectedID} />
      <Row onSelectRow={setSelectedID} selectedID={selectedID} />
      // ...
   )
}

const Row = (props) => {
   const {setSelectedID, selectedID} = props
   return (
      <TableRow
        onClick={() => {
          setSelectedID(row.id);
        }}
        selected={selectedID === row.id}
      >
      //...
      </TableRow>
   )

material-table How do I select a row changing the background color upon selection

You also need to pass the selectedRowId otherwise everything will be blue. Also, the rowStyle options accept a callback, which you could invoke like so:

rowStyle: rowData => ({
backgroundColor: this.state.selected && rowData.tableData.id === this.state.selectedRowId 
?   this.state.c
    : "#fff" 
})

Your onRowClick also needs some work (the select/unselect condition was not correct).
https://codesandbox.io/embed/select-one-row-160vm

material-ui table: how to make style changes to table elements

Your specificity on the css selector is not high enough. The rendered TD element has an inline style in which the background property is getting inherited which is overriding your class style.

Is there any reason since you already have the logic seperated out you don't just use inline styles for something like this.

<TableRowColumn style={{backgroundColor:'red', color: 'white',}}>{row[column.name]}</TableRowColumn>

This is definitely working well and I tested it.

Your other option would be to add !important to your css.

td.ae-zone {
  background-color: '#e57373' !important;
  color: "white" !important;
}

I think if I had to chose though I would recommend the first as it is cleaner.

How to Change The Text Color of The Selected Row in Material UI Table