Category: React Answers

Sometimes, we want to style text inside the ListItemText component with React Material UI.

In this article, we’ll look at how to style text inside the ListItemText component with React Material UI.

How to style text inside the ListItemText component with React Material UI?

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

For instance, we write:

import 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 Typography from "@material-ui/core/Typography";

export default function App() {
  return (
    <div>
      <List dense>
        <ListItem>
          <ListItemText
            primary={
              <Typography variant="h1" style={{ color: "green" }}>
                hello world
              </Typography>
            }
          />
        </ListItem>
      </List>
    </div>
  );
}

We set the primary prop of the ListItemText component to the Typography component to let us custom the text styles.

We set the variant prop to the tag name of the element we want to render.

And we set the style prop to the styles we want for the text.

As a result, we should see a h1 element rendered with the text being ‘hello world’ and the text is green.

Conclusion

To style text inside the ListItemText component with React Material UI, we can use the Typography component.

To make a React Material UI Raised Button link to an external URL, we can add a Button that has the variant prop set to contained.

Then we set the href prop of the button to the URL we want to go to.

For instance, we write:

import React from "react";
import Button from "@material-ui/core/Button";
export default function App() {
  return (
    <div>
      <Button variant="contained" href="https://example.com">
        Yahoo
      </Button>
    </div>
  );
}

to add a Button with the variant prop set to 'contained' to add a raised button.

And we set the href prop to 'https://example.com' to make the button go to https://example.com when we click it.

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.