Adjusting the appearance of Material-ui table within the row.getRowProps() function

I am currently working on a React application that utilizes Material-UI enhanced table, which is based on react-table. I have been trying to customize the styling of their rows.

According to the documentation (https://material-ui.com/api/table-row/), it states that in the TableRow component, the prop "classes" should be used to modify the style. However, in the Material-UI code, props are accessed like this:

<TableRow {...row.getRowProps()}>

My issue is how can I incorporate the "classes" prop since the TableRow props are automatically added? I assumed I needed to do something like this:

<TableRow classes="rowStyle ">

Where "rowStyle" is defined as:

const styles = {
   rowStyle : {
      padding: 10,
      border: "1px solid red"
   }
};

Clearly, this approach won't work. How can I include "classes" in the getRowProps() function and apply the new style?

I have not been able to find a clear explanation or example in the official documentation or on StackOverflow.

Thank you for any assistance provided.

EnhancedTable.js:

import React from "react";

// Remaining code omitted for brevity...

cssreactjsmaterial-uireact-tablereact-table-v7

Answer №1

It seems like the first step in finding a solution is to correctly define the styles for the material-ui element. While using a simple object like 

const inputStyle = { padding: 0, margin: 0, border: 0, background: "transparent", };
may not work, you need to utilize the material styles.

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  root: {
    border: "1px solid red",
    padding: 10
  },
});

Then, make sure to use the style hook in the component definition:

const classes = useStyles();

When overriding a material-ui definition, it's crucial to specify which part you want to override. You can refer to this image for Material-Ui CSS keys for Table Row - Material-Ui CSS keys for Table Row.

Next, override the style with something like 

<TableRow classes={{ root: classes.root }}>
or 
<TableRow classes={{ root: classes.root }} {...row.getRowProps()}>
based on your requirements.

You may also encounter issues with TableCell styles overlapping TableRow borders. In order to address this, you will need to override the styles for TableCells as well. Here is a code sandbox that might assist you in getting on the right path: https://codesandbox.io/s/material-demo-535zq?file=/demo.js

Answer №2

import {  createStyles, makeStyles } from '@material-ui/core/styles';

const useCustomStyles = makeStyles(() => (
    createStyles({
        customRowStyle: {
            padding: 10,
            border: "1px solid red"
        }
    })
));

const CustomTable = ()=>{

    const customClasses = useCustomStyles();

    return(
        <TableRow className={customClasses.customRowStyle}/>
    )

}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to ensure an image is responsive in CSS and aligns perfectly in height with its neighboring text?

There is an image within the <img> tag and some text inside the <p> tag, both enclosed in a <div>. Although the image is responsive and resizes proportionally when the browser window changes size, there is an issue where as the text wrap ...

htmlcss

The copying process of the React App Docker image seems to be dragging on for quite

My Dockerfile is shown below: FROM node:16 as build-stage WORKDIR /app COPY package*.json /app/ ARG PROJECT_NAME=react-ui RUN npm install --force COPY ./ /app/ RUN npm run build FROM nginx:alpine WORKDIR /usr/share/nginx/html RUN rm -rf ./* COPY - ...

reactjsdockernpm

Ways to assign dynamic widths to inner divs within a parent div automatically

I am working with divs <div id='top' > <div id='top-border' > </div> <div id='top-menu' > <jdoc:include type="modules" name="top-menu" style="well" /></div> </div> and adjust ...

htmlcss

Alternating CSS Designs for Displaying Multiple Mysql Query Results

I have a website where users can search for a specific product in their location, and the site will display a list of results. if(isset($_POST['zip'])){ $qry="SELECT business_id FROM ".TBL_BUSINESS." WHERE zip LIKE '%".$_POST['zip&apos ...

phpmysqlcss

Upon clicking the button, my goal is to prompt a message alert to appear on the screen

import React, { useState } from "react"; export default function DisplayProjectCard() { const [open, setOpen] = useState(false); const handleClick = () => { alert("Alert message here!"); window.open("https://project-uts-teori.vercel.app ...

reactjsmaterial-ui

Modify the UI color of the progress bar when the <Input> component is in focus

I'm in the process of identifying the specific class that needs to be overridden in order to change the color of the bar for the component I'm working with. Below is the code snippet: <Input id="email" ...

reactjsmaterial-ui

Tips for achieving a unique look with CSS: Transforming border radius colors in four distinct sections

Is it possible to create a gradient border with multiple colors using border radius? div { border-radius: 30px; width: 60px; height: 60px; border: 1px red solid } Hello <div> </div> I am looking to achieve a unique effect on my bord ...

cssborder

What is the best way to create individual clickable images that open up a modal window for each one?

Currently, I have created a function that is able to map images from an array in Next.js using react-bootstrap. The function is functioning as expected, however, my goal is to add an onClick function to each image so that when clicked, it opens up in a new ...

javascriptreactjsnext.js

Encountered an error when attempting to load the external module @babel/register during the

My React project runs smoothly on my VMware, but when I cloned the same app and executed the gulp command, I encountered an error during compilation: MacBook-Pro:Frontend1.0 apurvgandhwani$ gulp [18:42:31] Failed to load external module @babel/register ...

node.jsreactjsgulpbabeljsbabel-loader

MUI DataGrid - Looking to incorporate a unique styling feature into the data-grid

Here is the current output of my build This is the desired outcome for my build I am utilizing a template that comes with a predefined style class for dataGrid, which is automatically applied to all data-grid elements within the template. However, I need ...

material-uidatagrid

Switching the body's background image dynamically using javascript

I'm attempting to switch up the background image using JavaScript. Here's how I've defined the background: body { background: black; overflow-x: hidden; overflow-y: hidden; } body:before { overflow-x: hidden; overflow ...

javascripthtmlcss

Issue with the Styled Components Color Picker display

For the past 6 months, I have been using VSCode with React and Styled Components without any issues. However, recently I encountered a problem where the color picker would not show up when using CSS properties related to color. Usually, a quick reload or r ...

javascriptcssreactjsvisual-studio-codestyled-components

Resize the images and align them side by side

I have a container with a maximum width of 1400px. Inside this container, there are two images of different sizes. I want to align them in a row using flexbox so that they fit within the 1400px width and still maintain a visually appealing appearance as sh ...

htmlcssflexbox

Creating dynamic SVG components using an array of objects to represent functional elements

I attempted to populate the products cart with SVG icons using functional components */BusinessCards.svg function BusinessCards(props) { const {fill} = props; return ( <svg width={100} height={90} viewBox="0 0 100 90" > <path ...

reactjssvgmethodsnext.jsserver-side-rendering

When clicking on a link in React, initiate the download of a text file

Usually, I can use the following line to initiate the download of files: <a href={require("../path/to/file.pdf")} download="myFile">Download file</a> However, when dealing with plain text files like a .txt file, clicking on ...

javascriptreactjs

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

Single repository for shared libraries such as ReactJs, Material-UI, and more

Currently, I am delving into the concept of monorepos and envisioning a setup that includes: /apps = applications /components = numerous individual components /shared = main source libraries for ReactJS, Material-UI, etc. The rationale behind this setup i ...

reactjsmaterial-uishared-librariesmonorepo

Tips for increasing the spacing between typography and tabs in the AppBar

For the code snippet, you can refer to this link: https://codesandbox.io/s/smoosh-cookies-e4w5o Specifically, the code segment is: <AppBar position="static"> <Toolbar> <Typography variant="h6">News& ...

reactjsmaterial-ui

Modifying the appearance of select components in React MUI using CSS

Can someone help me modify the appearance of the react material UI select component to match this design: I have already applied the following CSS styling: const styles = { width:'250px', border:'1px solid gray', borderBot ...

cssreactjsmaterial-ui

Two elements occupy the rest of the vertical space

In the center, there is a div with content inside. I want the top and bottom divs to occupy the remaining space. Similar to this example <div class="container"> <div class="top"> </div> <div class="middle"> C ...

htmlcssflexbox