Now, I have ponent like this:

code of it:

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);

But need to button, that in top part contains icon and text message in bottom. I use reactjs and material-ui lib from here /

Now, I have ponent like this:

code of it:

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);

But need to button, that in top part contains icon and text message in bottom. I use reactjs and material-ui lib from here https://material-ui-next./demos/buttons/

• javascript
• css
• reactjs
• material-ui

• 2 This is easily achievable with css. Having your icon and div with a display: block;float: none; property should do the trick. – 3Dos Commented Apr 12, 2018 at 14:40
• @3Dos Do I need to use other propetries to move text under icon? just this style-attributes didn't help me( – Roberto Commented Apr 12, 2018 at 14:49

2 Answers 2

The Button ponent uses flexbox to control the layout/alignment of content. To align the content vertically (so the icon is above the text), you can simply change the flex-direction to column.

This style needs to be applied to an element inside the button ponent, not to the root element. You can use the classes property to override all of the styles in a ponent.

In this case, you want to add flexDirection: column to the label class.

Documentation on class overrides in material ui v1

Here's a working example. Hope it helps.

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./ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare./ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://unpkg./[email protected]/umd/material-ui.production.min.js"></script><link rel="stylesheet" href="https://fonts.googleapis./icon?family=Material+Icons"><div id="root" />

A (potentially bad) solution would simply be:

.MuiIconButton-label {
  flex-direction: column
}

I say bad, because you might want to use it in it's standard format elsewhere.

What I opted to do was add a class name nav-bar-icon-wrapper to the IconButton & set the flex direction in it's parent:

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

.MuiIconButton-label {
  flex-direction: inherit
}

If I run into instance later where I want the icon/label button to be standard, I'll just add a new class default-icon-wrapper and css that handles that:

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

FWIW: I preach the BEM http://getbem./introduction/ convention AND that whenever you make a ponent, you add an optional modifier prop.

I have functions in a shared dir that looks these:

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

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

Then I use that everywhere in my ponent so the user can access the ponent elements as a group or individually using their modifiers.

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

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

so something like navbar__menu_item bees navbar__menu_item navbar__menu_item-logout