Category: JavaScript

Sometimes, we want to make React Material-UI FloatingActionButton float.

In this article, we’ll look at how to make React Material-UI FloatingActionButton float.

How to make React Material-UI FloatingActionButton float?

To make React Material-UI FloatingActionButton float, we can apply styles to the Fab component to make it float.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  floatButton: {
    margin: 0,
    top: "auto",
    right: 20,
    bottom: 20,
    left: "auto",
    position: "fixed"
  }
}));

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

  return (
    <div>
      <Fab className={classes.floatButton}>
        <Add />
      </Fab>
    </div>
  );
}

We call makeStyles with a function that sets the floatButton class property to an object that has some styles to make the button float.

We set position to 'fixed' to keep the button in a fixed position.

And we set the position that the button is fixed at with the right and bottom properties.

All numbers are in pixels.

Next, we get the classes object from the useStyles hook returned by makeStyles.

And we apply the CSS styles by setting the className of the Fab to classes.floatButton.

As a result, we should see the floating action button stay at the bottom right of the page.

Conclusion

To make React Material-UI FloatingActionButton float, we can apply styles to the Fab component to make it float.

Sometimes, we want to add media queries in React Material UI components.

In this article, we’ll look at how to add media queries in React Material UI components.

How to add media queries in React Material UI components?

To add media queries in React Material UI components, we can call makeStyles with a function that takes the theme parameter.

Then we can get the breakpoints from theme and use them as properties for applying styles for different screen sizes.

For instance, we write:

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

const useStyles = makeStyles((theme) => ({
  drawerWidth: {
    width: "50%",
    backgroundColor: "yellow",
    [theme.breakpoints.up(780)]: {
      width: "80%"
    }
  }
}));

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

  return <div className={classes.drawerWidth}>hello world</div>;
}

We add the drawerWidth class property into the object returned by the makeStyles callback.

And we set it to an object that has the theme.breakpoints.up(780) property.

We set the width to '80%' when the width of the screen is 780px or wider.

Otherwise, the width is set to '50%'.

Conclusion

To add media queries in React Material UI components, we can call makeStyles with a function that takes the theme parameter.

Then we can get the breakpoints from theme and use them as properties for applying styles for different screen sizes.

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.