Material UI 的 CardHeader 动作样式答案

【问题标题】：Material UI's CardHeader action stylingMaterial UI 的 CardHeader 动作样式
【发布时间】：2019-07-26 09:25:02
【问题描述】：

我有一个 CardHeader，其中有一个下拉菜单，我使用来选择表格的各种选项，但目前它看起来很糟糕，我不完全确定如何以更合适的方式设置它的样式，我正在使用材质 UI框架来做到这一点。

 formControl: {
        flexBasis: 'auto',
        position: 'relative'
    },

<CardHeader className={classes.cardHeader} classes={{ title: classes.cardHeader }}
                        avatar={
                            <Home />
                        }
                        action={
                            <FormControl className={classes.formControl}>
                                <InputLabel htmlFor="Available Contracts" style={{ marginRight: 20, color: 'white' }}>Contract Type</InputLabel>
                                <Select
                                    value={contractType.contractObject}
                                    onChange={handleChange}
                                    inputProps={{
                                        name: 'contractObject',
                                        id: 'contractObject',
                                    }}
                                >
                                    <MenuItem value={10}>Local Contract</MenuItem>
                                    <MenuItem value={20}>Framework Contract</MenuItem>
                                </Select>
                            </FormControl>
                        }
                    />

表格下方的屏幕截图

您可以看到合同类型当前位于右侧，如果可能的话，我希望它位于左侧的主页图标旁边，有什么想法吗？

【问题讨论】：

标签： javascript reactjs material-design

【解决方案1】：

'Card' 组件还有更多的子组件 - 'CardHeader'、'CardContent'。要为实例设置 CardHeader 样式，API 表示您可以执行以下操作：

import React from 'react';
import { makeStyles } from '@material-ui/styles';
import {
  Card, CardContent, CardHeader, Divider
} from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  action: {
    margin: 0
  }
}))

const CustomerInfoCards = ({ customer }) => {
  const classes = useStyles();
  return (
    <Card>
      <CardHeader
        action={
          <p>{customer._id}</p>
        }
        classes={{ action: classes.action }}
        className={classes.action}
        subheader={customer.email}
        title={customer.name}
      />
      <Divider />
      <CardContent>
        <h2>Some text</h2>
      </CardContent>
    </Card>
  )
}

export default CustomerInfoCards

这里的主要内容是classes={{ action: classes.action }} - 它删除了动作道具的默认边距顶部和右侧 8px。看看上面的 API 链接，了解 material-ui 暴露的各种 CSS 并享受有趣的样式！

【讨论】：

【解决方案2】：

在您的 formControl 样式中添加一个新属性 flex 并将其值设为 flex: "0 1 auto",

formControl: {
        flexBasis: 'auto',
        position: 'relative',
        flexgrow: '1',
        flex: '0 1 auto',

    }

希望这会有所帮助。 flex 通常将组件调整到较早组件的相对右侧。

阅读更多：CSS flex on W3Schools

【讨论】：