Category: JavaScript

Sometimes, we want to set a height of a dialog in React Material UI.

In this article, we’ll look at how to set a height of a dialog in React Material UI.

How to set a height of a dialog in React Material UI?

To set a height of a dialog in React Material UI, we can set the classes prop of the dialog to an object that has the paper property set to a class that has the height style.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";

const useStyles = makeStyles(() => ({
  dialog: {
    height: 500
  }
}));

export default function App() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);

  const handleClickOpen = () => {
    setOpen(true);
  };

  const handleClose = () => {
    setOpen(false);
  };

  return (
    <div>
      <Button variant="outlined" color="primary" onClick={handleClickOpen}>
        Open alert dialog
      </Button>
      <Dialog
        open={open}
        onClose={handleClose}
        classes={{ paper: classes.dialog }}
      >
        <DialogTitle>Use Google's location service?</DialogTitle>
        <DialogContent>
          <DialogContentText>
            Let Google help apps determine location. This means sending
            anonymous location data to Google, even when no apps are running.
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={handleClose} color="primary">
            Disagree
          </Button>
          <Button onClick={handleClose} color="primary" autoFocus>
            Agree
          </Button>
        </DialogActions>
      </Dialog>
    </div>
  );
}

We call makeStyles with a function that returns an object with the dialog property.

It’s set to an object with the height set to 500 pixels.

Next, we add a Button that opens the dialog.

And then we add the Dialog itself with the classes prop set to { paper: classes.dialog } to apply the styles in the classes.dialog class.

We call useStyles to return the classes.

Now we should see that the height of the dialog is 500px.

Conclusion

To set a height of a dialog in React Material UI, we can set the classes prop of the dialog to an object that has the paper property set to a class that has the height style.

Sometimes, we want to set the TextField height React Material UI.

In this article, we’ll look at how to set the TextField height React Material UI.

How to set the TextField height React Material UI?

To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import { TextField } from "@material-ui/core";

const useStyles = makeStyles(() => ({
  input1: {
    height: 50
  },
  input2: {
    height: 200,
    fontSize: "3em"
  }
}));

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

  return (
    <div className="App">
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: classes.input1 } }}
      />
      <TextField
        variant="outlined"
        InputProps={{ classes: { input: classes.input2 } }}
      />
    </div>
  );
}

to call makeStyles with a function that returns an object with the classes with height styles.

Then we call useStyles to return the classes.

Next, we set InputProps to an object with the classes.input set to the classes we created with makeStyles to set the height of each TextField.

Conclusion

To set the TextField height React Material UI, we can set the InputProps prop of the TextField to an object that has the classes property.

Sometimes, we want to enlarge the SVG icon in React Material UI icon buttons.

In this article, we’ll look at how to enlarge the SVG icon in React Material UI icon buttons.

How to enlarge the SVG icon in React Material UI icon buttons?

To enlarge the SVG icon in React Material UI icon buttons, we can call the makeStyles function.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(() => ({
  deleteIcon1: {
    "& svg": {
      fontSize: 25
    }
  },
  deleteIcon2: {
    "& svg": {
      fontSize: 50
    }
  },
  deleteIcon3: {
    "& svg": {
      fontSize: 75
    }
  },
  deleteIcon4: {
    "& svg": {
      fontSize: 100
    }
  }
}));
export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton className={classes.deleteIcon1}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon2}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon3}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon4}>
        <DeleteIcon />
      </IconButton>
    </div>
  );
}

We call makeStyles with a function that returns the classes with the & svg set to the size of the SVG icon.

We use '& svg' to select the SVG icon and set that to an object with the font size we want.

Then we apply the styles by setting the className of the IconButton to the styles returned by useStyles.

As a result, we should see the icon size being different for each icon.

Conclusion

To enlarge the SVG icon in React Material UI icon buttons, we can call the makeStyles function.

Sometimes, we want to apply different color to the AppBar title with React Material UI.

In this article, we’ll look at how to apply different color to the AppBar title with React Material UI.

How to apply different color to the AppBar title with React Material UI?

To apply different color to the AppBar title with React Material UI, we can use the makeStyles function.

For instance, we write:

import React from "react";
import {
  makeStyles,
  Typography,
  AppBar,
  Toolbar,
  IconButton,
  Button
} from "@material-ui/core";
import { Menu } from "@material-ui/icons";

const useStyles = makeStyles(() => ({
  title: {
    color: "yellow",
    flexGrow: 1
  }
}));

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

  return (
    <AppBar position="static">
      <Toolbar>
        <IconButton edge="start" color="inherit">
          <Menu />
        </IconButton>
        <Typography variant="h6" className={classes.title}>
          News
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

We call makeStyles with a function that returns the styles we want for the title.

We set the color to yellow and flexGrow to 1 to make it fill any available space.

Then we set the className of the Typography component to classes.title to apply the styles in the title class.

As a result, we see that the color of the title is yellow.

Conclusion

To apply different color to the AppBar title with React Material UI, we can use the makeStyles function.

Sometimes, we want to align a component to the center or right with React Material UI.

In this article, we’ll look at how to align a component to the center or right with React Material UI.

How to align a component to the center or right with React Material UI?

To align a component to the center or right with React Material UI, we can add a flex container with the Grid component.

For instance, we write:

import React from "react";
import { Grid, Button } from "@material-ui/core";

export default function App() {
  return (
    <Grid container justify="flex-end">
      <Button>Example</Button>
    </Grid>
  );
}

We add the Grid component and add the container prop to make it a flexbox container.

Then we set the justify prop to flex-end to align the child components on the right side.

As a result, the Example button should stay on the right side of the page.

Conclusion

To align a component to the center or right with React Material UI, we can add a flex container with the Grid component.