Problem updating a component's color

React
1

Hi there!

I just started learning React and I was exploring Material React Table V2 (https://www.material-react-table.com/).
I got stuck trying to update a mere element’s color within my table, and even though it seemed like a very simple problem, I spent so much time trying to solve it in vain.

Below is my code for the React component I created. I only want to change the color of the sorting and filter buttons to white.
Code:

import { useMemo } from "react";
import {
  MaterialReactTable,
  useMaterialReactTable,
  type MRT_ColumnDef,
} from "material-react-table";

//example data type
type Property = {
  pID: string;
  address: string;
  postCode: string;
  llID: string;
  tID: string;
};

//nested data is ok, see accessorKeys in ColumnDef below
const data: Property[] = [
  {
    pID: "101S",
    address: "101 SunnyGo Property",
    postCode: "00Z 00Y",
    llID: "FKY",
    tID: "CHP",
  },
  {
    pID: "103L",
    address: "103 Louvre de lion",
    postCode: "SE14 6QJ",
    llID: "PLN",
    tID: "JTR",
  },
  {
    pID: "109K",
    address: "109 Konoha Village",
    postCode: "HA2 8AB",
    llID: "NRT",
    tID: "SSK",
  },
  {
    pID: "504S",
    address: "504 Shibuya",
    postCode: "UB2 5AQ",
    llID: "SUK",
    tID: "ITD",
  },
  {
    pID: "789M",
    address: "789 Marine Ford",
    postCode: "BR2 8DN",
    llID: "WB",
    tID: "AC",
  },
  {
    pID: "579E",
    address: "579 Empel Down",
    postCode: "EN6 5QD",
    llID: "MG",
    tID: "DMG",
  },
  {
    pID: "154A",
    address: "154 Amazon Lili",
    postCode: "SE20 7YZ",
    llID: "BH",
    tID: "LFY",
  },
  {
    pID: "269A",
    address: "269 Alabasta",
    postCode: "N4 2DN",
    llID: "CD",
    tID: "RBN",
  },
  {
    pID: "963C",
    address: "963 Clover Kingdom",
    postCode: "ME4",
    llID: "JLS",
    tID: "YM",
  },
];

const Table = () => {
  //should be memoized or stable
  const columns = useMemo<MRT_ColumnDef<Property>[]>(
    () => [
      {
        accessorKey: "pID", //access nested data with dot notation
        header: "P-ID",
        size: 150,
      },
      {
        accessorKey: "address",
        header: "Address",
        size: 200,
      },
      {
        accessorKey: "postCode", //normal accessorKey
        header: "Post Code",
        size: 200,
      },
      {
        accessorKey: "llID",
        header: "LL-ID",
        size: 150,
      },
      {
        accessorKey: "tID",
        header: "T-ID",
        size: 150,
      },
    ],
    []
  );

  const table = useMaterialReactTable({
    columns,
    data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
    columnFilterDisplayMode: "popover",
    muiTableHeadRowProps: {
      sx: {
        backgroundColor: "#1f1f1f",
      },
    },
    muiTableHeadCellProps: {
      sx: {
        color: "white",
        "& .MuiSvgIcon-root, MuiTableSortLabel-root": {
          color: "white !important",
        },
      },
    },
  });

  return <MaterialReactTable table={table} />;
};

export default Table;
1 Like
2

I inspected the elements in the browser and figured out the necessary elements and overrides.

Some icons are in the MuiButtonBase-root, so I added that to the list. Then I had to override the ‘opacity’ to get full brightness. You could reduce those to 0.7 for a nicer dim than the default.

Jerry

        muiTableHeadCellProps: {
            sx: {
                // text color
                color: "white",
                "& .MuiSvgIcon-root, .MuiButtonBase-root, .MuiSvgIcon-root, .MuiTableSortLabel-root": {
                    // icon colors
                    fontStyle: {
                        color: 'white !important',
                        opacity: 1, // override
                    },
                }
            },
        },
3

Thank you for your answer, Jerry.

I also inspected and tried something similar, but I’m still facing an issue. When I refresh the page, always the very first sort icon’s color is changed to the default (not white). Also, when I sort one of the columns, the new arrow shown (arrow up or arrow down) is in the default color as well.

Do you have an idea how I could solve this?

Thanks !

1 Like
4

------ STILL ONE PROBLEM – It works sometimes and then not again. I think it’s a cache issue.

I found that if I used all these overrides everything still doesn’t work. Until I change the value of the “color” variable and my app hot-rerefreshes on it’s own. Then everything looks great. But as soon as I hit refresh in the browser, it goes back to stupid. So I think it’s cache. I’ve added every class I can find.

I added !important to the first ‘color’ – then everything worked great. Then I refreshed and it stopped again. Something’s buggy. Not sure what it is. This code seems to work unreliably. I think there’s a bug in the “sx” style feature. Maybe visit the “style override” methods instead of that “sx” experimental feature.

So while I thought everything below was good to go – something’s still broken.
Sorry my friend.

Jerry

        muiTableHeadCellProps: {
            sx: {
                // text color
                color: "white !important",
                "& .MuiTableSortLabel-root, .MuiTableSortLabel-iconDirectionAsc, .MuiTableSortLabel-iconDirectionDesc, .MuiButtonBase-root, .MuiTableSortLabel-root, .MuiSvgIcon-root, .MuiTableSortLabel-icon, .MuiButtonBase-root, .MuiSvgIcon-root, .MuiTableSortLabel-root": {
                    // icon colors
                    fontStyle: {
                        color: 'white !important',
                        opacity: 1, // override
                    },
                }
            },
        },

So to break it down – I inspected the element in the browser. Then copied the contents of that element to a text editor. Carefully inspected what classes are in use for that element. This has to be done AFTER sorting so you can see the affected classes.

In this case ----

<svg class= MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiTableSortLabel-icon MuiTableSortLabel-iconDirectionAsc css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon" focusable=“false” aria-hidden=“true” viewBox=“0 0 24 24” data-testid=“ArrowDownwardIcon”>

The non-highlighted stuff can be ignored. css-1vweko9-MuiSvgIcon-root-MuiTableSortLabel-icon is a combined/compiled CSS, so ignore that. Everything else is not CSS stuff.

From the highlighted stuff - we see:

  • MuiSvgIcon-root – already overriding this one.
  • MuiSvgIcon-fontSizeMedium – font size - not our concern
  • MuiTableSortLabel-icon – already overriding this one
  • MuiTableSortLabel-iconDirectionAsc – Hey! A new one we aren’t overriding.

So I added that to the list of classes to override and it worked. Done! – but still broken sometimes. lol

5

Thank you Jerry for your thorough answer!

I forgot to reply back here haha.

The issue is indeed probably related to the cache somehow because it just keeps breaking every time I refresh. The thing is, it works perfectly on their documentation page, so I will inspect their page and see what’s going on there.

Anyway, I won’t need this feature until I create my dark mode. I’ll first finish dealing with big concerns, then come back to this later.

Have a great weekend !

1 Like
6

You are very welcome. I just quiet I could fix it. lol

1 Like