Put Border in Material UI in React-CodePudding

How do you put a border only if elevation is 0 in Material-UI in React? This code below puts a border on all card of course.

const theme = createTheme({
  components: {
    MuiCard: {
      styleOverrides: {
        root: {
          border: `1px solid green`,
          position: "relative",
          zIndex: 0,
        },
      },
    },
  },
});

CodePudding user response：

If you have a specific elevation you will notice that your css class has a specific style for it. For example when you use

<Card elevation={4}>

you get a class like this .MuiPaper-elevation4

If you use elevation={0} the Card component will get the default class MuiPaper-elevation0. So you can target this class to add the border you want and only those Card components will be affected.

Add this to your theme (remove the border from the MuiCard theme override)

MuiCard: {
  styleOverrides: {
    root: {
      // border: `1px solid green`,
      position: "relative",
      zIndex: 0,
    },
  },
},
MuiPaper: {
  styleOverrides: {
    elevation0: {
      border: '1px solid green'
    },
  },
},

Then by using <Card elevation={0}> only for that case you will have a border (this is a tested solution)

Here is the url that can help you with all the classes you can override in your theme https://mui.com/material-ui/api/paper/