Question

我有一个内部带有下拉菜单的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>
                        }
                    />

表格下方的屏幕截图

如您所见，“合同类型”当前位于右侧，如果可能的话，我想在“主页”图标旁边的左侧找到它，

Answer 1

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

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

    }

希望这会有所帮助。 flex通常将组件调整为较早组件的相对权利。

了解更多：CSS flex on W3Schools

Answer 2

“卡片”组件还有其他子组件-“卡片头”，“卡片内容”。要为实例设置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并享受有趣的样式！

材质UI的CardHeader动作样式

2 个答案: