Category: React

Sometimes, we want to add padding and margin to all React Material-UI components.

In this article, we’ll look at how to add padding and margin to all React Material-UI components.

How to add padding and margin to all React Material-UI components?

To add padding and margin to all React Material-UI components, we can use the Box component.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <Box m={2} pt={3}>
        <Button color="default">Your Text</Button>
      </Box>
    </div>
  );
}

We use Material UI’s Box component to add a container with margin and padding.

We set the margin on all sides with the m prop and we set the top padding with the pt prop.

As a result, we should see the padding and margin applied.

Conclusion

To add padding and margin to all React Material-UI components, we can use the Box component.

Sometimes, we want to align horizontal icon and text in React Material UI.

in this article, we’ll look at how to align horizontal icon and text in React Material UI.

How to align horizontal icon and text in React Material UI?

To align horizontal icon and text in React Material UI, we can add flexbox styles with makeStyles.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  wrapIcon: {
    alignItems: "center",
    display: "flex"
  }
}));

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

  return (
    <div>
      <Typography variant="subtitle1" className={classes.wrapIcon}>
        <Link /> revolve
      </Typography>
    </div>
  );
}

to call makeStyles with a function that returns the styles for the wrapIcon class to return the useStyle hook.

We set wrapIcon to an object that sets the display CSS property to 'flex' and alignItems to 'center' to vertically align the items in the flex container.

Next, we set the className of the Typography component to classes.wrapIcon to apply the wrapIcon class to the Typography container component that we got from the useStyle hook.

As a result, we see that the Link icon is aligned with the ‘resolve’ text.

Conclusion

To align horizontal icon and text in React Material UI, we can add flexbox styles with makeStyles.

Sometimes, we want to float right or left using the Material-UI app bar.

In this article, we’ll look at how to float right or left using the Material-UI app bar.

How to float right or left using the Material-UI app bar?

To float right or left using the Material-UI app bar, we can set flexGrow CSS property to 1 to stretch the elements we want to grow in the app bar.

For instance, we write:

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

const useStyles = makeStyles((theme) => ({
  root: {
    flexGrow: 1
  },
  menuButton: {
    marginRight: theme.spacing(2)
  },
  title: {
    flexGrow: 1
  }
}));

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

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

We call makeStyles with a function that returns an object with the root and title class properties set to objects with the flexGrow property set to 1.

Then, we apply the classes.title class to the Typography component to stretch the title container to fill all spaces outside the buttons.

As a result, we see the IconButton stay on the left and the Login button stay on the right of the app bar.

Conclusion

To float right or left using the Material-UI app bar, we can set flexGrow CSS property to 1 to stretch the elements we want to grow in the app bar.

Sometimes, we want to style a React Material UI text field.

In this article, we’ll look at how to style a React Material UI text field.

How to style a React Material UI text field?

To style a React Material UI text field, we can call the makeStyles function with a function that returns an object that specifies the styles.

Then we can set the InputProps prop of the TextField to specify the styles of the input element in the text field.

And we can specify the styles for the rest of the text field with the className prop of the TextField.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  textField: {
    width: "90%",
    marginLeft: "auto",
    marginRight: "auto",
    paddingBottom: 0,
    marginTop: 0,
    fontWeight: 500
  },
  input: {
    color: "white"
  }
}));

export default function App() {
  const classes = useStyles();
  const [email, setEmail] = useState();

  return (
    <div>
      <TextField
        id="email"
        label="Email"
        className={classes.textField}
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        margin="normal"
        InputProps={{
          className: classes.input
        }}
      />
    </div>
  );
}

We call makeStyles with a function that returns an object that has properties that are used as class names.

And we set the class name properties to objects with styles that we want to apply.

Next, we set the className prop to the classes.textField class to style the TextField‘s styles to apply the styles in the textField object property returned by the callback we passed into makeStyles.

And we set the InputProps prop to an object that has the className property set to classes.input to apply the styles in the input style object property.

Conclusion

To style a React Material UI text field, we can call the makeStyles function with a function that returns an object that specifies the styles.

Then we can set the InputProps prop of the TextField to specify the styles of the input element in the text field.

And we can specify the styles for the rest of the text field with the className prop of the TextField.

Sometimes, we want to apply styles for CSS pseudo selectors with Material UI.

In this article, we’ll look at how to apply styles for CSS pseudo selectors with Material UI.

How to apply styles for CSS pseudo selectors with Material UI?

To apply styles for CSS pseudo selectors with Material UI, we can add style properties for pseudoselectors.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  paragraphWithWarningDiv: {
    margin: "32px 0px 24px",
    "& :nth-child(1)": {
      marginBottom: "100px"
    }
  }
}));

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

  return (
    <div className={classes.paragraphWithWarningDiv}>
      <p>foo</p>
      <p>foo</p>
      <p>foo</p>
    </div>
  );
}

We call makesStyles with an object to apply extra bottom margin to the first child element of the parent with class paragraphWithWarningDiv.

We set the marginBottom of the first child element by setting the "& :nth-child(1)" property to an object with marginBottom set to '100px'.

As a result, we see that the first p element has a 100px bottom margin.

Conclusion

To apply styles for CSS pseudo selectors with Material UI, we can add style properties for pseudoselectors.