CODEWITHSUNDEEP
reactjs
louay baccary
louay baccary

Reputation: 51

React Js Card Component doesn't support border width and color

I'm using Card component(from MaterialUI framework) for a Web Site built using Reacts , I'm facing a problem when i try to modify the border width , color and shadow of the Card components, it seems like it doesn't work . This is my Code :

       <Card
            style={{
              display: "inline-block",
              margin: "0 2px",
              transform: "scale(0.8)",

                borderWidth: 50, 
                shadowColor: 'red', 
                shadowOffset: { height: 50, width: 20 },
                shadowOpacity: 0.9,
                shadowRadius: 0.9,
            }}
          >

Upvotes: 1

Views: 7031

Answers (2)

Dennis Vash
Dennis Vash

Reputation: 53894

In MUI you style with Hook API:

const useStyles = makeStyles({
  root: {
    minWidth: 275,
    border: `2px solid red`,
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  },
});

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

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

Upvotes: 6

Hemant Parashar
Hemant Parashar

Reputation: 3774

You can use the makeStyles function and assign a custom class (here root) to the <Card> component like this

import { makeStyles } from '@material-ui/core/styles';


const useStyles = makeStyles({
  root: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)",
    borderWidth: 50,
    shadowColor: 'red',
    shadowOffset: { height: 50, width: 20 },
    shadowOpacity: 0.9,
    shadowRadius: 0.9,
  },
});

const CardWrapper = ()=>{
  const classes = useStyles();

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

Refer this https://material-ui.com/components/cards/#SimpleCard.js

Hope this helps !

Upvotes: 0

Related Questions