javascript - 如何通过reactjs在图标下创建带有文本的按钮？

Question

现在，我有这样的组件:

代码:

import React from "react";
import {withStyles} from "material-ui/styles";
import Settings from "material-ui-icons/Settings"; 
import Button from "material-ui/Button";

const styles = {
button: {
    color: "primary",
    height: 95,
    width: 95,
    disableRipple: "true",
    focusRipple: "true",
},
icon: {
    height: 35,
    width: 35,
    display: "block",
    float: "none",
},
text: {
    height: 35,
    width: 35,
    display: "block",
    float: "none",
    marginTop: 10,
},
};

/* eslint-disable react/prop-types */
const IconedLabel = ({classes}) => (
<section>
    <Button className={classes.iconButton} variant="raised" color="primary">
        <Settings className={classes.icon}/>
        <div className={classes.text}>Message</div>
    </Button>
</section>
);

export default withStyles(styles)(IconedLabel);

但需要按钮，顶部包含图标和底部的文本消息。 我从这里使用 reactjs 和 material-ui lib https://material-ui-next.com/demos/buttons/

Answer 1

Button 组件使用 flexbox 来控制内容的布局/对齐。要垂直对齐内容(因此图标位于文本上方)，您只需将 flex-direction 更改为 column。

此样式需要应用于按钮组件内的元素，而不是根元素。您可以使用 classes 属性覆盖组件中的所有样式。

在这种情况下，您希望将 flexDirection: column 添加到 label 类。

Documentation on class overrides in material ui v1

这是一个工作示例。希望能帮助到你。

const [React, ReactDOM, Button, Settings, withStyles] = [window.React, window.ReactDOM, window['material-ui'].Button, ({className}) => <i className={`material-icons ${className}`}>settings</i>, window['material-ui'].withStyles]
// Ignore code above this line

const styles = theme => ({
  button: {
    height: 95, // setting height/width is optional
  },
  label: {
    // Aligns the content of the button vertically.
    flexDirection: 'column'
  },
  icon: {
    fontSize: '32px !important',
    marginBottom: theme.spacing.unit
  }
})

const CustomButton = ({ classes }) => (
  <Button
    /* Use classes property to inject custom styles */
    classes={{ root: classes.button, label: classes.label }}
    variant="raised"
    color="primary"
    disableRipple={true}
  >
    <Settings className={classes.icon} />
    Message
  </Button>
)

const WrappedCustomButton = withStyles(styles)(CustomButton)
ReactDOM.render(<WrappedCustomButton />, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://unpkg.com/material-ui@1.0.0-beta.40/umd/material-ui.production.min.js"></script><link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><div id="root" />