Category: React

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.

Sometimes, we want to create a navbar with React Material-UI.

In this article, we’ll look at how to create a navbar with React Material-UI.

How to create a navbar with React Material-UI?

To create a navbar with React Material-UI, we can use the AppBar, Tabs, and Tab components.

Then we create our own TabPanel component to add the content for each tab.

For instance, we write:

import * as React from "react";
import AppBar from "@material-ui/core/AppBar";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import TabContext from "@material-ui/lab/TabContext";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1,
    backgroundColor: theme.palette.background.paper
  }
}));

function TabPanel(props) {
  const { children, value, index, ...other } = props;

  return (
    <div hidden={value !== index} {...other}>
      {value === index && (
        <Box py={3} my={6}>
          <Typography>{children}</Typography>
        </Box>
      )}
    </div>
  );
}

export default function App() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);
  const handleChange = (_, newValue) => setValue(newValue);

  return (
    <div className={classes.root}>
      <TabContext>
        <AppBar>
          <Tabs value={value} onChange={handleChange}>
            <Tab label="Item 1" />
            <Tab label="Item 2" />
            <Tab label="Item 3" />
            <Tab label="Item 4" />
          </Tabs>
        </AppBar>
        <TabPanel value={value} index={0}>
          Item One
        </TabPanel>
        <TabPanel value={value} index={1}>
          Item Two
        </TabPanel>
        <TabPanel value={value} index={2}>
          Item Three
        </TabPanel>
        <TabPanel value={value} index={3}>
          Item Four
        </TabPanel>
      </TabContext>
    </div>
  );
}

We wrap everything with TabContext so that we can display the right content when we click on each Tab.

We add the AppBar as the container for the Tabs.

And we add the Tab to add the link for each tab.

Next, we set the value prop to value to highlight which tab is clicked.

And we set the onChange prop to handleChange to show set the value state to the index of the tab that’s clicked.

Next, we add the TabPanel component that takes the value and index props.

If value is the same as index, then we show the content of the TabPanel.

The children prop has the contents.

As a result, when we click on each tab, we see the content updated.

Conclusion

To create a navbar with React Material-UI, we can use the AppBar, Tabs, and Tab components.

Then we create our own TabPanel component to add the content for each tab.

Sometimes, we want to submit a form by in a React Material UI dialog.

In this article, we’ll look at how to submit a form by in a React Material UI dialog.

How to submit a form by in a React Material UI dialog?

To submit a form by in a React Material UI dialog, we set the onSubmit prop to a function that calls e.preventDefault.

For instance, we write:

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

const useStyles = makeStyles((theme) => ({
  paper: {
    padding: "10px"
  }
}));

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

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

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

  return (
    <div>
      <button type="button" onClick={handleOpen}>
        Open Modal
      </button>
      <Dialog open={open}>
        <Box className={classes.paper}>
          <form
            onSubmit={(e) => {
              e.preventDefault();
              handleClose();
            }}
          >
            <div>
              <TextField name="email" hintText="Email" />
            </div>
            <div>
              <TextField name="pwd" type="password" hintText="Password" />
            </div>
            <div>
              <button type="submit">Submit</button>
            </div>
          </form>
        </Box>
      </Dialog>
    </div>
  );
}

We add a Dialog with the open prop set to open state so that we make sure that the dialog is open only when open is true.

In the Dialog, we add the form element with the TextFields to add the inputs.

Then we add a button with type set to submit to run the function we set as the value of the onSubmit prop.

In the function, we call e.preventDefault to prevent the default server-side submission behavior.

And we call handleClose to set open to false to close the dialog box.

Conclusion

To submit a form by in a React Material UI dialog, we set the onSubmit prop to a function that calls e.preventDefault.