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,
},
},
};
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,
},
},
};
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.