Ways to customize MuiPaper-root styling within material-table

Currently utilizing a material-table from https://material-table.com/.

An issue I am encountering is the inability to change the table's border-radius and shadow using the 'option feature'.

Upon inspecting the table, it appears that the radius and shadow can be modified as seen here:

https://i.sstatic.net/NVv7M.png

I am curious about how to override these values from Reactjs:


const useStyles = makeStyles(theme => ({
  root: {
  }
}));

const MainTable = props => {
  const {className, params, ...rest} = props

(...)
  return (
    <MaterialTable
      className={classes.MuiPaperRounded}
      columns={[
        {title: 'Equipement', field: 'equipement'},
        {title: 'TAG', field: 'tag'},
        {title: 'Nombre de points de mesures', field: 'nombreDePointsDeMesures'},
        {title: 'Mesuré', field: 'mesure', type: 'boolean'}
      ]}
      data={rows}
      icons={(...)}
      options={{
        tableLayout: {backgroundColor: 'green'},
      }}
      title="Routine vibration"
    />
  );
};
javascriptcssreactjsmaterial-uimaterial-table

Answer №1

If you're struggling to personalize styles within a third-party component,

You can try using a nested selector with an external className.

For instance:

"& .MuiPaper-root"

Here is the complete code snippet:

import React from "react";
import "./styles.css";
import { makeStyles } from "@material-ui/core";
import MaterialTable from "material-table";

const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiPaper-root": {
      borderRadius: "100px",
      boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75);"
    }
  }
}));

export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <MaterialTable />
    </div>
  );
}

https://codesandbox.io/s/sleepy-thunder-s947k?fontsize=14&hidenavigation=1&theme=dark

https://i.sstatic.net/bjeIO.png

Answer №2

To learn how to effectively customize theme styles, refer to the documentation link provided at this location.

In your specific case, you can apply the following override:

const theme = createTheme({
  components: {
    // Component name
    MuiPaper: {
      styleOverrides: {
        // Slot name
        root: {
          // CSS properties
          borderRadius: "100px",
          boxShadow: "10px 10px 5px 0px rgba(0,0,0,0.75)",
        },
      },
    },
  },
});

Answer №3

root: {
        display: 'flex'
        "&.MuiPaper-root":{
            backgroundColor:"#fafafa" //for demonstration purposes
        }
  },

//the code snippet was functional

Answer №4

If you prefer, you have the option to completely replace the component with your own design (for example, using a Box instead):

<MaterialTable title="Available Options" 
isLoading={loading}
icons={tableIcons} 
columns={tableColumns} 
data={tableData}  
components={{
    Container: props => <Box>{props.children}</Box>
  }}
... customize the rest of your settings as needed

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

Bring in a particular module from the natural library (webpack)

I have been utilizing the npm natural library for tokenization, specifically in one line of code: let token = natural.StemmerJa.prototype.tokenizeAndStem(searchWord, true); My concern lies in how to properly import it in webpack, given that tokenizeAndSte ...

javascriptnode.jswebpack

The `className` property did not align between the Server and Client

I tried various solutions, such as the one mentioned in this Stack Overflow answer and the official solution provided by Material-UI for Next.js, but unfortunately none of them worked for me. I am currently using Next.js, Material UI, and js-cookies. The ...

reactjsnext.jsmaterial-uifrontend

Unable to resolve issue with Display:flex in my CSS, despite numerous attempts

Here is the structure of my CSS and HTML: #TopBar{ display: flex; justify-content: space-between; z-index: 1; position: fixed; top: 0px; left: 0px; background-color: rgb(25,25,25); height:115px; width: 2000px; } #Logo{ top: 0px; height: 110px ...

javascripthtmlcsswebflexbox

JavaScript regular expression pattern matching

After encountering a peculiar URL, I found myself in this dilemma: var oURL = "https://graph.facebook.com/#{username}/posts?access_token=#{token}"; I am determined to extract both the username and token from it; My first attempt was: var match = (/#&bs ...

javascriptregexnode.js

Guide to removing a particular textfield from a table by clicking a button with ReactJS and Material UI

I need assistance with deleting a textfield on a specific row within a table when the delete button for that row is clicked. Currently, I am able to add a text field by clicking an add button and delete it by clicking a remove button. However, the issue is ...

javascriptarraysreactjsecmascript-6material-ui

Update the user information by using its unique identifier at a specific location

I am currently working on editing user data with a specific MongoDB instance. When I click on the user's details, a modal popup appears with an update button below it. My goal is to have the user data updated when this button is clicked for the partic ...

javascriptnode.jsmongodbexpressecmascript-6

Why is the Google Map missing from the Bootstrap modal dialog?

I have multiple links on my website, each describing a different location with unique map data. I would like to display a modal bootstrap dialog with an embedded Google map when a user clicks on any of the links - ensuring that the location shown correspon ...

javascriptjqueryhtmltwitter-bootstrapgoogle-maps

Is it possible to transfer an image from the client to the NodeJS server and store it locally within the server itself?

Is there a way for me to upload an image from the client side, send it via an HTTP request (POST) to the server (NodeJS), and save it internally on the server? Whether using Jquery, XMLHttpRequest, or a form, I continue to face the same issue where I can& ...

javascriptnode.js

Is it commonplace for redux to generate an abundance of storage?

I'm noticing a lot of lines in the terminal, is it really necessary to create so many storage instances? 4. The WrappedApp just created a new store with withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined } 14:47:39.619 ...

javascriptreactjsreduxnext.js

What is the best way to save a JavaScript object or JSON within an HTML element using the HTML5 data attribute?

I have an anchor element and I want to store and retrieve the object within it in this specific format. <a id ="test" data-val="{key1:val1,key1:val1}"> </a> When saved in this manner, fetching it with $("#test").data('val') returns ...

javascriptjqueryjsonhtml

Unlocking the power of translation in React: Implementing Amazon Translate or Google Translate for AXIOS responses

I'm currently working on converting Axios JSON responses in React. Here is the code snippet: axios.get('https://jsonplaceholder.typicode.com/users') .then(res => { ...translation_logic_here setU ...

javascriptreactjsgoogle-translateamazon-translate

The process of assigning a function to an object in JavaScript is currently not functioning properly

After updating a Vue2 project to Vue3, I ran into an issue with Javascript. It seems that the language now prevents me from assigning a function to an object. In the code below, I define a function "bar" within a loop. While I can successfully call the fu ...

javascriptvue.jsvuejs2

skip every nth element in the array based on the specified value

The Challenge I'm currently working on a graph that relies on an array of data points to construct itself. One major issue I've encountered is the need for the graph to be resizable, which leads to the necessity of removing certain data points ...

javascript

The CSS3 Animation remains stationary

I've been attempting to animate my block element moving to the left using CSS animation shorthand property, but unfortunately, it's not working as expected. Here is my HTML: <div id="game"> <div id="block">&l ...

htmlcssanimation

Bring in dynamically

I am interested in dynamically importing a module only when it is needed. To achieve this, I have created a small mixin: import {extend} from "vee-validate"; export const rules = { methods: { addRule (name) { let requi ...

javascriptvue.jsecmascript-6vuejs2

Error encountered in Node.js when using mysql2: SyntaxError occurs due to an unexpected token ":" when JSON.stringify is modified

When I do not override the JSON.stringify function, the query functions correctly. However, when I do override it, I encounter the error SyntaxError: Unexpected token ':' Here is the complete code. I execute it with the command "node filen ...

javascriptmysqlnode.jsnode-mysql2

What is the best way to retrieve the specific property from a bound function?

I'm looking to retrieve the value of a specific property from a function that has already been bound. function foo(){ console.log(this.a) } const bar = foo.bind({a:1}) bar() // Outputs 1 bar.getThis() // expected result is { a: 1 } Given the code ...

javascriptthis

Utilize AngularJs and JavaScript to upload information to a JSON file

Exploring the realm of Angular JS, I am on a quest to create a CRUD form using AngularJs and Json with pure javascript without involving any other server side language. The script seems to be functioning well but is facing an obstacle when it comes to writ ...

javascriptjqueryjsonangularjsangularjs-scope

Tips for setting up numerous Material UI badges for identical content

I'm facing a unique challenge where I need to include several badges on one piece of content. It doesn't appear to be covered in the documentation as a supported feature. Has anyone encountered this before and found a solution? How should I go ab ...

material-ui

Encountering a rendering error with Jest while trying to load a functional child component

I encountered an error message stating Error: Uncaught [Error: Child(...): Nothing was returned from render while testing the Parent component. Below are the relevant files that were involved: /components/Page/Children/Child.js import React from "re ...

javascriptreactjsjestjs