Question

无法设置expandalble图标按钮的样式
版本0.18.1

这是我的代码

class TaskCard  extends React.Component {
  constructor(props){
    super(props);
 }
  render(){
  const {data}=this.props;
  return (
  <Card >
    <CardHeader
      title={this.props.title}
      subtitle= {data.FixDetails}
      actAsExpander={true}
      showExpandableButton={true}
      avatar={
              <div style={{display:'inline'}}>
              <FontIcon className="material-icons" style={{marginRight:'15px'}} >play_arrow</FontIcon>
              <FontIcon className="material-icons" color={getSevrityColor(data.Sevirity)} >error</FontIcon>
              </div>
              }
      style={{display:'inline-block',width:'80%'}}
      iconStyle={{margin:'0px'}}
    />
    <CardActions style={{display:'inline-block'}}>`
//buttons
    </CardActions>
    <CardText expandable={true} >
      {data.FixDetails}
    </CardText>
  </Card>
  )
}`
};

我通过地图渲染 data.Tasks.map((x,i) => <TaskCard key={i} data={x} Tags={x.Tags} title={x.Tags.origin} subtitle={x.Type}/>)

我得到的错误是。我不得不在头像中添加箭头，因为我无法根据需要将IconButton放到左侧。

Warning: Unknown prop iconStyle on <div> tag. Remove this prop from the element. For details, 
    in div (created by CardHeader)
    in CardHeader (created by TaskCard)
    in div (created by Card)
    in div (created by Paper)
    in Paper (created by Card)
    in Card (created by TaskCard)
    in TaskCard (created by tasks)
    in div (created by List)
    in List (created by tasks)
    in div (created by tasks)
    in div (created by tasks)
    in div (created by tasks)
    in tasks (created by Unknown)
    in div (created by Page)
    in TweenOne (created by QueueAnim)
    in div (created by QueueAnim)
    in QueueAnim (created by Page)
    in div (created by Page)
    in Page (created by Connect(Page))
    in Connect(Page) (created by DimensionsHOC)
    in div (created by DimensionsHOC)
    in DimensionsHOC (created by Unknown)
    in div (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in section (created by MainAppLoggedIn)
    in div (created by MainAppLoggedIn)
    in MainAppLoggedIn (created by DimensionsHOC)
    in div (created by DimensionsHOC)
    in DimensionsHOC (created by BaseDashboard)
    in BaseDashboard (created by Connect(BaseDashboard))
    in Connect(BaseDashboard) (created by Unknown)
    in div (created by App)
    in div (created by App)
    in MuiThemeProvider (created by App)
    in App (created by Connect(App))
    in Connect(App) (created by Unknown)
    in Unknown (created by Unknown)
    in Unknown
    in Provider

所有这一切的主要目的是使可扩展的IconButton出现在左侧而不是右侧。

Answer 1

您可能正在使用此版本的旧版本，其中iconStyle尚未实现。您可以忽略此警告（不是您提到的错误）或者只是升级到当前版本。

Property reference for your estimated material-ui version (0.18.1)

关于头像图标的位置：在CardHeader中有一个头像定位方案，图像在标题\副标题栏之前（即向左），所以你需要覆盖它。根据您的代码段，查看我制作的this example。

使用Card / Card-header时，<div>标签上的未知道具`iconStyle`

1 个答案: