Question

我有这个React组件：

const ItemsOverview = ({ details, classes }) => {
    return (
        <div>
        {
            details.items.map(item => {
                return (
                    <div key={item.itemBatchNumber}>
                        <ExpansionPanel>
                            <ExpansionPanelSummary className={classes.PanelSummary} expandIcon={<ExpandMoreIcon />}>
                                <IconButton className={classes.button} aria-label="Print" onClick={DoStuff}><PrintIcon /></IconButton>
                                &nbsp;
                                <Typography className={classes.heading}>My panel title</Typography>
                            </ExpansionPanelSummary>
                            <ExpansionPanelDetails>
                                My Content
                            </ExpansionPanelDetails>
                        </ExpansionPanel>
                    </div>
                );
            })
        }
        </div>
    );
};

IconButton的样式现在很小：

const styles = theme => ({
    button: {
        margin: 0,
        padding: 0
    }
});

没有IconButton，我得到一个可接受高度的面板：

使用IconButton，面板区域放大了很多：

如果不使用IconButton，我可以做些什么来制作面板呢？

显然设置边距和填充并没有帮助。

Answer 1

额外填充来自ExpansionPanelSummary组件，而不是IconButton，这就是设置按钮padding: 0和margin: 0没有任何效果的原因

您需要覆盖ExpansionPanelSummary上的样式，以便您的按钮不会在标题中添加额外空格：

const styles = theme => ({
  noPadding: {
    margin: '0',
  },
});

<ExpansionPanelSummary classes={{content: classes.noPadding}} expandIcon={<ExpandMoreIcon />}>

然后，因为标题文本周围不再有任何填充，您需要将填充添加回Typography组件：

const styles = theme => ({
  padded: {
    margin: '12px 0',
  },
});

<Typography className={classes.padded}>Expansion Panel 1</Typography>

这是一个完整的工作示例：

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import ExpansionPanel, {
  ExpansionPanelSummary,
} from 'material-ui/ExpansionPanel';
import Typography from 'material-ui/Typography';
import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
import PrintIcon from 'material-ui-icons/Print';
import IconButton from 'material-ui/IconButton'; 

const styles = theme => ({
  noPadding: {
    margin: '0',
  },
  padded: {
    margin: '12px 0',
  },
});

function SimpleExpansionPanel(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <ExpansionPanel>
        <ExpansionPanelSummary classes={{content: classes.noPadding}} expandIcon={<ExpandMoreIcon />}>
          <IconButton component="div" tabIndex="-1" aria-label="Print"> <PrintIcon /> </IconButton>
          <Typography className={classes.padded}>Expansion Panel 1</Typography>
        </ExpansionPanelSummary>
      </ExpansionPanel>
    </div>
  );
}

SimpleExpansionPanel.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(SimpleExpansionPanel);

IconButton扩展了它的容器的尺寸

1 个答案: