How to style show/hide columns menu?

[Ian-Harrington]

How to style show/hide columns menu?

I am looking to style the items within the popover menu for the default action "columnsButton". From the source code here, I'd expect that passing styling for "formControlLabel" to an overridden Toolbar component would be propagated to elements within the popover menu. Doing so in the codesandbox, the searchField and showColumns action icon can be styled, but no change is seen in the menu styling. What am I missing to style the checkboxes and text in the menu?

codesandbox: https://codesandbox.io/s/material-table-starter-template-forked-iwtjhm?file=/src/index.js

---

import React, { useState } from "react";
import ReactDOM from "react-dom";
import MaterialTable, { MTableToolbar } from "@material-table/core";
import { makeStyles, createStyles } from "@mui/styles";

const rando = (max) => Math.floor(Math.random() * max);

const words = ["Paper", "Rock", "Scissors"];

const rawData = [];
for (let i = 0; i < 100; i++) {
  rawData.push({ id: rando(300), word: words[i % words.length] });
}

const columns = [
  { title: "Id", field: "id" },
  { title: "Word", field: "word" }
];

const useStyles = makeStyles((theme) =>
  createStyles({
    formControlLabel: {
      "& .MuiButtonBase-root": {
        color: "red"
      },
      "& .MuiCheckbox-root": {
        color: "red"
      },
      "& .Mui-Checked": {
        color: "pink"
      }
    },
    searchField: {
      "& .MuiInputBase-input": {
        color: "blue"
      }
    }
  })
);

const App = () => {
  const [data, setData] = useState(rawData);
  const classes = useStyles();
  return (
    <MaterialTable
      data={data}
      columns={columns}
      title="Starter Template"
      options={{ columnsButton: true }}
      components={{
        Toolbar: (props) => (
          <MTableToolbar
            {...props}
            className={classes.searchField + " " + classes.formControlLabel}
          />
        )
      }}
    />
  );
};
const rootNode = document.querySelector("#root");
ReactDOM.render(<App />, rootNode);

[Domino987]

Hi, so https://github.com/material-table-core/core/blob/master/src/components/MTableToolbar/index.js#L184 this style just takes our styling, which is not the passed but generated by us. The classes are just used for the outer most wrapper. How would you propose to pass items to each child Menuitem?

[Ian-Harrington]

Understood. I'm new to React and don't have sufficient experience to suggest an implementation that is robust/extensible enough to include in this package.

For my own purposes I ended up creating a custom show/hide menu component with the desired styling which I included in the toolbar. Some thoughts that might be helpful to others with similar issues:

• The reason the styling is applied to the toolbar buttons but not the menu is that the popover element is rendered outside the table component tree and is instead a direct child of the element.
• The elements within the popover still have classes that will be styled based on a global theme, which might be configurable to suit your needs. See the docs for MenuItem or Checkbox styling

Thanks for the reply.