Style card component from material-ui

Question

By default Card component has a box-shadow style. I would like to change the box-shadow color if the item is clicked. However I can't even change box-shadow color using styles (no click event).

Card Component render a Paper element, and this element define the styles like this:

function getStyles(props, context) {
  const {
    circle,
    rounded,
    transitionEnabled,
    zDepth,
  } = props;

  const {
    baseTheme,
    paper,
  } = context.muiTheme;

  return {
    root: {
      color: paper.color,
      backgroundColor: paper.backgroundColor,
      transition: transitionEnabled && transitions.easeOut(),
      boxSizing: 'border-box',
      fontFamily: baseTheme.fontFamily,
      WebkitTapHighlightColor: 'rgba(0,0,0,0)', // Remove mobile color flashing (deprecated)
      boxShadow: paper.zDepthShadows[zDepth - 1], // No shadow for 0 depth papers
      borderRadius: circle ? '50%' : rounded ? '2px' : '0px',
    },
  };
}

As paper is render using also styles sent as parameter:

<div {...other} style={prepareStyles(Object.assign(styles.root, style))}>

I try to send boxShadow as a parameter:

  card: {
    position: 'relative',
    width: '350px',
    color: 'red',
   boxShadow: 'rgba(255, 0, 0, 0.117647) 0px 1px 6px, rgba(255, 0, 0, 0.117647) 0px 1px 4px'
  },

but nothing happens. My Card component should change shadow value onHover and this effect stops working:

import React, {Component, PropTypes} from 'react'
import {Card, CardActions, CardHeader, CardMedia, CardText} from 'material-ui/Card'
import FlatButton from 'material-ui/FlatButton'
import PictogramMenu from './PictogramMenu'

const styles = {
  card: {
    position: 'relative',
    width: '350px',
    color: 'red'
    //borderStyle: 'solid',
    //borderColor: 'yellowgreen'
    //boxShadow: 'rgba(255, 0, 0, 0.117647) 0px 1px 6px, rgba(255, 0, 0, 0.117647) 0px 1px 4px'
  },
  menu: {
    position: 'absolute',
    right: '10px',
    top: '15px'
  },
  cardHeader: {
    paddingBottom: '40px'
  }
}

export default class PictogramCard extends Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
    img: PropTypes.string.isRequired
  }

  constructor(props) {
    super(props)
    this.state = {shadow: 1}
  }
  onMouseOver = () => this.setState({shadow: 3})
  onMouseOut = () => this.setState({shadow: 1})

  render() {
    return (
      <Card style={styles.card} containerStyle={{width: 300}} zDepth={this.state.shadow}
        onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
        <CardHeader />
        <PictogramMenu style={styles.menu} />
        <CardMedia>
          <img src={this.props.img} />
        </CardMedia>
        <CardText>
          {this.props.title}
        </CardText>
        <CardActions>
          <FlatButton label='Tag1' />
          <FlatButton label='Tag2' />
        </CardActions>
      </Card>
    )
  }
}

Any hint?

Answer 1

Even if the question is dated, I will try to answer it.

It's necessary to override the classes of the component card. These classes are used for theming.

how?

Add classes={{ root: classes.card }} to Card element:

<Card classes={{ root: classes.card }}>
    <CardActionArea>
        <Grid direction="row" item xs={12} sm={6}>
          <CardContent>
            <Typography noWrap gutterUp>
              {title}
            </Typography>
            <Typography noWrap variant="body3" color="textPrimary" component="p">
              {date} by {author}
            </Typography>
            <Typography variant="body3" color="textPrimary" component="p">
              {body}
            </Typography>
          </CardContent>
        </Grid>
    </CardActionArea>
  </Card>

Next add styling to your makeStyles like this:

const useStyles = makeStyles({
 card: {
  borderRadius: 0,
  backgroundColor: theme.palette.primary.light,
  color: theme.palette.primary.contrastText,
  boxShadow: "none"
 }
});

And that's it. For more details: go