Material-UI Card Border Color

Viewed 75

How do you change the border color of card in material-UI? This doesn't work well below.

export default {
  styleOverrides: {
    root: {
      borderColor: `green`,
      borderRadius: 2,
      position: "relative",
      zIndex: 0,
    },
  },
};
2 Answers

There are multiple ways to do it. If you want to change border color globally you need to use a theme override.

If you need only for a single card component you can use the sx prop as below

  <Card sx={{border: 'solid 1px green', borderRadius: 2}} variant="outlined">Contents</Card>

For doing this globally use ThemeProvider and pass your custom theme.

const theme = createTheme({
  components: {
    // Name of the component
    MuiCard: {
      styleOverrides: {
        // Name of the slot
        root: {
          // Some CSS
          borderColor: "green",
          borderRadius: 2,
          position: "relative",
          zIndex: 0,
        },
      },
    },
  },
});

Use this theme in ThemeProvider

<ThemeProvider theme={theme}>
  <Card>...</Card>
</ThemeProvider>

Another method is to override the root card class

Example

.MuiCard-root {
      borderColor: `green`,
      borderRadius: 2,
      position: "relative",
      zIndex: 0,
}

Here is one way of doing it.

import { withStyles, makeStyles } from "@material-ui/core/styles";
...

const useStyles = makeStyles({
  root: {
      borderColor: "green",
      borderRadius: 2,
      position: "relative",
      zIndex: 0,
  }
});
...

export default function App() {
  const classes = useStyles();

  return <Card className={classes.root}></Card>;
}

Edit: For global theme CSS style overrides, you can do this,

import { ThemeProvider, createTheme } from '@mui/material/styles';
...
const theme = createTheme({
  components: {
    MuiCard: {
      styleOverrides: {
        root: {
           borderColor: "green",
           borderRadius: 2,
           position: "relative",
           zIndex: 0,
        },
      },
    },
  },
});
...

export default function App() {

  return (
       <ThemeProvider theme={theme}>
          <Card>green</Card>
       </ThemeProvider>
  )
}

From their doc:

The theme's styleOverrides key makes it possible to potentially change every single style injected by Material UI into the DOM. This is useful if you want to apply a fully custom design system to Material UI's components.

Related