Category: JavaScript

Sometimes, we want to horizontally center an item in React Material UI Grid item.

In this article, we’ll look at how to horizontally center an item in React Material UI Grid item.

How to horizontally center an item in React Material UI Grid item?

To horizontally center an item in React Material UI Grid item, we can use flexbox to justify and align the content in the center position.

For instance, we write:

import * as React from "react";
import Grid from "@material-ui/core/Grid";

export default function App() {
  return (
    <div>
      <Grid container align="center" justify="center" alignItems="center">
        <Grid item xs={false} sm={4} md={6}>
          foo
        </Grid>
        <Grid item xs={12} sm={4} md={6}>
          bar
        </Grid>
      </Grid>
    </div>
  );
}

We add the container prop to the outer Grid to make it a flex container.

We set the align prop to 'center' to center align items vertically.

And we set the justify prop to 'center' to center items horizontally.

Then we add Grids inside the outer Grid to add content into the container Grid.

Conclusion

To horizontally center an item in React Material UI Grid item, we can use flexbox to justify and align the content in the center position.

Sometimes, we want to make a React Material UI TableRow column span multiple columns.

In this article, we’ll look at how to make a React Material UI TableRow column span multiple columns.

How to make a React Material UI TableRow column span multiple columns?

To make a React Material UI TableRow column span multiple columns, we set the colSpan prop of the TableCell component.

For instance, we write:

import * as React from "react";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableRow from "@material-ui/core/TableRow";
import TableCell from "@material-ui/core/TableCell";

export default function App() {
  return (
    <div>
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>Data 1</TableCell>
            <TableCell>Data 2</TableCell>
          </TableRow>
          <TableRow>
            <TableCell colSpan={2}>Data Two Columns</TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}

We set the colSpan of the TableCell in the 2nd TableRow to 2.

As a result, the cell should span 2 columns instead of 1.

Conclusion

To make a React Material UI TableRow column span multiple columns, we set the colSpan prop of the TableCell component.

Sometimes, we want to style React Material UI FormControlLabel font size.

In this article, we’ll look at how to style React Material UI FormControlLabel font size.

How to style React Material UI FormControlLabel font size?

To style React Material UI FormControlLabel font size, we can set the label prop of the FormControlLabel component to render a Typography component.

For instance, we write:

import * as React from "react";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Typography from "@material-ui/core/Typography";
import Checkbox from "@material-ui/core/Checkbox";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles(() => ({
  formControlLabel: { fontSize: "30px", "& label": { fontSize: "0.6rem" } }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <FormControlLabel
        control={<Checkbox value="Hello" color="primary" />}
        label={
          <Typography className={classes.formControlLabel}>World</Typography>
        }
      />
    </div>
  );
}

We call makeStyles with a function that returns the styles for the formControlLabel class to set the font size.

Then we call the useStyles hook in App to apply the styles by setting the className prop of the Typography component to classes.formControlLabel.

Next, we set the control prop to a Checkbox component to add a checkbox.

The label prop is set to the Typography component to let us render the text with our styles.

Conclusion

To style React Material UI FormControlLabel font size, we can set the label prop of the FormControlLabel component to render a Typography component.

Sometimes, we want to resize a React Material UI button.

In this article, we’ll look at how to resize a React Material UI button.

How to resize a React Material UI button?

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button.

For instance, we write:

import * as React from "react";
import Button from "@material-ui/core/Button";

export default function App() {
  return (
    <div>
      <Button
        style={{
          maxWidth: "50px",
          maxHeight: "50px",
          minWidth: "30px",
          minHeight: "30px"
        }}
      >
        hello
      </Button>
    </div>
  );
}

We add a button by adding the Button component.

And we set the style prop of the button to an object that has the maxWidth, maxHeight, minWidth and minHeight properties.

They set the max width, max height, min width, and min height of the button.

Conclusion

To resize a React Material UI button, we set can the style prop of the Button to an object that sets the dimensions of the button.

Sometimes, we want to position MenuItems under the React Material UI Select component.

In this article, we’ll look at how to position MenuItems under the React Material UI Select component.

How to position MenuItems under the React Material UI Select component?

To position MenuItems under the React Material UI Select component, we can set the Select‘s MenuProps component to set the position of the MenuItems.

For instance, we write:

import * as React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  return (
    <div>
      <Select
        fullWidth
        MenuProps={{
          anchorOrigin: {
            vertical: "bottom",
            horizontal: "left"
          },
          transformOrigin: {
            vertical: "top",
            horizontal: "left"
          },
          getContentAnchorEl: null
        }}
      >
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    </div>
  );
}

We add the Select drop down with the MenuProps prop set to an object that has the anchorOrigin property to set the position of the menu.

We set vertical to 'bottom' and horizontal to 'left' and we set transformOrigin to an object with vertical set to 'top' and horizontal set to 'left' to put the MenuItems below the Select component.

Conclusion

To position MenuItems under the React Material UI Select component, we can set the Select‘s MenuProps component to set the position of the MenuItems.