来自material-ui的样式卡片组件答案

【问题标题】：Style card component from material-ui来自material-ui的样式卡片组件
【发布时间】：2016-09-28 09:43:15
【问题描述】：

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

卡片组件渲染一个 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>
    )
  }
}

有什么提示吗？

【问题讨论】：

我在这里尝试过，它似乎工作正常，我通过了zDepth 和styleproperty，都工作正常
Upps，你是对的。 alpha 通道，改变值我可以欣赏颜色！

标签： material-ui

【解决方案1】：

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

必须重写组件card的类。这些类用于主题化。

怎么样？

将 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"
 }
});

就是这样。更多详情：go

【讨论】：