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

【问题标题】：How to create button with text under icon by reactjs?如何通过reactjs在图标下创建带有文本的按钮？
【发布时间】：2018-04-12 14:38:48
【问题描述】：

现在，我有这样的组件：

代码：

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/

【问题讨论】：

这很容易通过 css 实现。让你的图标和 div 带有 display: block;float: none; 属性应该可以解决问题。
@3Dos 我需要使用其他属性来移动图标下的文本吗？只是这种风格属性对我没有帮助（

标签： javascript css reactjs material-ui

【解决方案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'))

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

【讨论】：

【解决方案2】：

一个（可能不好的）解决方案就是：

.MuiIconButton-label {
  flex-direction: column
}

我说不好，因为您可能想在其他地方以它的标准格式使用它。

我选择将类名 nav-bar-icon-wrapper 添加到 IconButton 并在其父级中设置 flex 方向：

.nav-bar-icon-wrapper {
  flex-direction: column
}

.MuiIconButton-label {
  flex-direction: inherit
}

如果我稍后遇到我希望图标/标签按钮成为标准的实例，我将添加一个新类 default-icon-wrapper 和处理该问题的 css：

.default-icon-wrapper {
  flex-direction: row
}

FWIW： 我宣扬 BEM http://getbem.com/introduction/ 约定并且，每当你制作一个组件时，你都会添加一个可选的 modifier 属性。

我在共享目录中有如下功能：

export function BEMifyThis(modifier) {
    return (klass) => BEMify(klass, modifier)
}

export function BEMify(klass, modifier=false) {
    if (modifier) {
      klass += ` ${klass}-${modifier}`
    }
    return klass
}

然后我在组件中的任何地方都使用它，这样用户就可以将组件元素作为一个组访问，也可以使用它们的修饰符单独访问。

import {BEMifyThis} from '../shared/bem'
const BEMify = BEMifyThis(this.props.modifier)

className={"navbar__menu_item")}
becomes
className={BEMify("navbar__menu_item")}

所以像navbar__menu_item 这样的东西变成navbar__menu_item navbar__menu_item-logout

【讨论】：