Material-UI中的样式卡组件

Question

默认情况下，Card组件具有盒子阴影样式。 如果单击项目，我想更改盒子阴影颜色。但是，即使没有单击事件，我也无法使用样式更改盒子阴影颜色。

Card组件渲染一个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'
  },

但是没有任何动作发生。我的卡片组件在悬停时应该更改阴影值，但这个效果停止工作：

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

有什么提示吗？

- user2670996

---

我在这里尝试了一下，似乎可以正常工作，我传递了 zDepth 和 style 属性，两者都很好用。 - André Junges

哎呀，你说得对。Alpha通道，改变值后我能欣赏到颜色！ - user2670996

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

就是这样了。要获取更多细节信息，请前往。

- bAbdenour