来自 material-ui 的样式卡组件

Question

默认情况下 Card 组件具有 box-shadow 样式。如果单击该项目，我想更改框阴影颜色。但是，我什至无法使用样式（无单击事件）更改框阴影颜色。

Card Component 渲染了一个 Paper 元素，这个元素定义了这样的样式：

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

由于纸张使用作为参数发送的样式进行渲染：

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

我尝试将 boxShadow 作为参数发送：

  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'
  },

但什么也没有发生。我的 Card 组件应该更改 onHover 的阴影值并且此效果停止工作：

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>
    )
  }
}

任何提示？

Answer 1

即使这个问题已经过时，我也会尽力回答。

有必要重写组件卡的类。这些类用于主题化。

如何？

将classes={{root:classes.card}}添加到Card元素：

<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>

接下来将样式添加到makeStyles中，如下所示：

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

就是这样。欲了解更多详情：请前往