Category: React

Sometimes, we want to fix the issue where Grid in Material UI causes horizontal scroll in React.

In this article, we’ll look at how to fix the issue where Grid in Material UI causes horizontal scroll in React.

How to fix the issue where Grid in Material UI causes horizontal scroll in React?

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography, Grid } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Grid container spacing={0}>
        <Typography variant="h3">hello world</Typography>
      </Grid>
    </ThemeProvider>
  );
}

to add the container prop to Grid to make it render as a container element.

Then we set the spacing prop to 0 to remove all spacing from the container element.

Now the container should stay in the page.

Conclusion

To fix the issue where Grid in Material UI causes horizontal scroll in React, we can remove all the padding from the child grid items within the container.

Sometimes, we want to change the font family of all React Material UI components.

In this article, we’ll look at how to change the font family of all React Material UI components.

How to change the font family of all React Material UI components?

To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme.

Then we apply the theme with ThemeProvider to apply the styles to the whole app.

For instance, we write:

import React from "react";
import { createTheme, ThemeProvider } from "@material-ui/core/styles";
import { Typography } from "@material-ui/core";

const theme = createTheme({
  typography: {
    fontFamily: [
      "Nunito",
      "Roboto",
      "Helvetica Neue",
      "Arial",
      "sans-serif"
    ].join(",")
  }
});

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Typography variant="h3">hello world</Typography>
    </ThemeProvider>
  );
}

We call createTheme with an object that has the typography.fontFamily property.

The property is set to a string with the font we want app to use and any fallback fonts comes after the main font.

Next, we add the ThemeProvider component with the theme prop set to theme to apply the theme styles, which includes the font styles.

And we can use the Typography to add text with the font we want.

Conclusion

To change the font family of all React Material UI components, we can call the createTheme function provided by Material UI to set the font styles for the theme.

Then we apply the theme with ThemeProvider to apply the styles to the whole app.

Sometimes, we want to add a link to a List with React Material UI.

In this article, we’ll look at how to add a link to a List with React Material UI.

How to add a link to a List with React Material UI?

To add a link to a List with React Material UI, we can set the href prop of a ListItem component.

For instance, we write:

import React from "react";
import { List, ListItem, ListItemText } from "@material-ui/core";

export default function App() {
  return (
    <div>
      <List>
        <ListItem button component="a" href="https://www.google.com">
          <ListItemText primary="Google" />
        </ListItem>
      </List>
    </div>
  );
}

We set the href prop of ListItem to a URL.

And we set the component prop to 'a' to render the list item as a link.

As a result, we should see a link rendered and it should go to https://www.google.com when we click on it.

Conclusion

To add a link to a List with React Material UI, we can set the href prop of a ListItem component.

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.