Question

默认情况下，卡片组件具有盒子阴影样式。如果单击该项，我想更改框阴影颜色。但是，我甚至无法使用样式（无点击事件）更改框阴影颜色。

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

但没有任何反应。我的卡组件应该更改阴影值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

即使问题已过时，我也会尝试回答。

有必要覆盖组件 card 的类。这些类用于主题化。

如何？

在 Card 元素中添加 classes = {{root：classes.card}} ：

Public Class Ribbon1
    Private Sub btnBlackDiamond_Click(sender As Object, e As RibbonControlEventArgs) Handles btnBlackDiamond.Click
        ThisApplication.GanttBarFormat(StartShape:=PjBarEndShape.pjDiamond, StartType:=PjBarType.pjSolid, StartColor:=PjColor.pjRed)
    End Sub
End Class

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

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

就是这样。有关更多详细信息：go

Answer 2

在中心和描边中使用 Material UI 卡片

 <Card style={{ maxWidth: 450, minHeight: 500, marginLeft: 730 ,marginTop:188,borderStyle:'solid',borderWidth:'2px',borderColor:'rgb(69,150,243)'}}>

来自material-ui的样式卡组件

2 个答案: