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

Ways to modify the input value to appear as subscript

Is there a way in React for my handleChange function to change the input value to subscript? class App extends Component { state = { equation: "" }; handleChange = event => { this.setState({ [event.target.name]: event.target.value }); ...

reactjs

What is the best way to transfer data from a server component to a client component in a Next.js 14 application router?

Looking for a way to transfer data from the server component to the client component in Next.js 13 app router? In my page.tsx file, I am making a call to an external API that retrieves the city of the person. Now, I need to pass this city data to the clie ...

reactjsnext.jsstate-managementnext.js13app-router

The process of invoking a method from a different component or the parent component

It all boils down to a simple issue: my main App consists of log in and log out methods, along with other functionalities: onLoggedIn(authData) { // requires both user and token console.log(authData); // display authData in console this.setState ...

reactjsimportlocal-storagelogout

The this.setState method does not seem to be properly updating the nested array within the user object. However, when checking the same logic using console.log, the object

When the user selects multiple meals, they are stored in an array of objects inside the user object. Upon clicking submit, the code utilizes setState to update the user's meals as follows: submitAllMeals(arrayOfMeals) { this.setState({ u ...

javascriptreactjs

Exploring the process of iterating through fetched arrays and presenting the outcomes using Next.js

I'm encountering an issue while attempting to iterate through an array and display the results individually on my website. The error message that keeps appearing is: TypeError: this.props.fetched.map is not a function I'm unsure of what is caus ...

reactjsnext.js

Is there a way to transform these into five columns within a single row using the Material-UI Grid system?

I'm trying to align 5 columns in one row, but I'm struggling to achieve the desired layout. Here is what I currently have: https://i.stack.imgur.com/d3z3n.png Any tips on how to make all columns appear in a single row? You can also view my att ...

javascriptreactjsmaterial-ui

The issue of Next.JS fetch not caching data within the same request

I am faced with a straightforward setup where a Next.JS server-side component is responsible for fetching and displaying a post. The challenge lies in setting the page title to reflect the title of the post, requiring me to call my posts API endpoint twice ...

javascriptreactjsnext.jsfetch-apinext.js13

Guide for creating a function that accepts an array containing multiple arrays as input

I am working with a function called drawSnake and it is being invoked in the following manner: drawSnake( [ [0, 0], [0, 1], [0, 2], [0, 3], [0, 4], ] ); How should I format the input for this function? I have attempted using Array<Array<[numb ...

javascriptreactjstypescriptfunctiontypes

Reactjs OCR reader

Just starting out with reactjs and I've been tasked with building an application that can scan a mykad (Malaysian ID card) using a camera. I need to be able to extract details like name, address, and image. I've done some research on open source ...

reactjsimageocrreader

Having trouble with customizing the active style of the React Bootstrap nav links

Is there a way to create an active tab menu that changes style when hovered over? I've tried using activeClassName="selected" but it doesn't seem to be working. Can anyone provide some guidance on how to address this issue? Here is the CSS I am ...

reactjsbootstrap-4react-bootstrapreact-css-modules

Do not engage with the website while animations are running

I'm working on a JavaScript project where I want to create textareas that grow and center in the window when clicked, and shrink back down when not focused. However, I ran into some issues with the .animate() function that are causing bugs. During QA ...

javascriptjquerycss

What steps should I take to customize the design of my Stripe subscription payment page?

I am having trouble with the alignment of the subscription payment page, which is currently displaying all information in a single line. I would like to format it like a traditional payment form with card number, CVV, and expiry on separate lines rather th ...

javascriptphphtmlcssstripe-payments

The node-main script was not executed when using Nw-react-script

Currently, I am in the process of developing a Desktop App that utilizes create-nw-react-app and Sqlite as its technologies. Dealing with compiling native modules with NW.js has proven to be quite challenging. To address this issue, I have attempted to in ...

node.jsreactjsnode-webkit

create-react-app insert personalized configuration variable

I am looking to incorporate custom environment variables into my React project using a boilerplate setup. Within my development (DEV) environment, I would like to direct the API towards my localhost backend, while in production (PROD) environment, it shoul ...

reactjsreact-boilerplatereact-scripts

What is the reason behind the MenuAppBar defaulting to the 1st menu item being selected

Unlike in the menu where the first item is not selected by default, the menuAppBar has the first item selected by default. I am looking to have the same behavior as the menu in the menuAppBar. ...

reactjsmaterial-ui

What steps can I take to display a download button when a file is clicked on?

As a backend developer, I usually don't delve into JavaScript tasks, but I have a simple query for JavaScript developers that I need help with. Here is my question: I am trying to display a download button when a specific file is clicked using jQuery ...

javascriptjquerynode.jsreactjs

Setting up a global CSS and SASS stylesheet for webpack, TypeScript, Phaser, and Angular: A step-by-step guide

A manual configuration has been set up to accommodate all the technologies mentioned in the title (webpack, typescript, phaser, and angular). While it works perfectly for angular component stylesheets, there seems to be an issue with including a global st ...

cssangulartypescriptwebpacksass

Sending a parameter to an npm application within a Docker container

I have successfully created a npm react-app that links to a REST backend via a specific URL. In order to run the app on Kubernetes, I have deployed it and placed it within an nginx container. Although the app is functioning properly, I am interested in m ...

reactjsdockernginxkubernetes

Exploring uncharted territory with the Navigator component in React Native

I am experiencing an issue with undefined navigator when using React Native MessageTabs: _onPressItem = (item) => { const { navigate } = this.props.navigation; //console.log(JSON.stringify(item)); navigate('SingleConversation', {id ...

javascriptreactjsreact-native

React Router Blank Page Conundrum

In a new project, I'm experiencing an issue where the content is not loading in despite using a similar React-Route setup that worked in a previous project. When I create a nav link in the root directory, it changes the path but the screen remains whi ...

javascriptreactjsreact-router