Category: React Answers

Sometimes, we want to make a horizontal list with React Material UI.

In this article, we’ll look at how to make a horizontal list with React Material UI.

How to make a horizontal list with React Material UI?

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

For instance, we write:

import * as React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "row",
    padding: 0
  }
}));

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

  return (
    <div>
      <List className={classes.root}>
        <ListItem>
          <ListItemText primary="foo1" secondary="bar1" />
        </ListItem>
        <ListItem>
          <ListItemText primary="foo2" secondary="bar2" />
        </ListItem>
      </List>
    </div>
  );
}

We call makeStyles with a function that returns an object with the root class.

The root class property is set to an object that has the display property set to 'flex'.

This will make the list items display horizontally.

Next, we add the List into App.

And we add the ListItems into it.

Finally, we add ListItemText into the ListItems to add some text into each item.

Conclusion

To make a horizontal list with React Material UI, we can set the style of the List to have the display CSS property set to 'flex'.

Sometimes, we want to set Typography text color in React Material UI.

In this article, we’ll look at how to set Typography text color in React Material UI.

How to set Typography text color in React Material UI?

To set Typography text color in React Material UI, we can set the color and variant props.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <Typography gutterBottom variant="h2" component="h2" color="secondary">
        hello world
      </Typography>
    </div>
  );
}

We set the variant prop to set the size of the text.

component sets the component to render the text as.

The color prop sets the color.

As a result, we should see large red text displayed on screen.

Conclusion

To set Typography text color in React Material UI, we can set the color and variant props.

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.