Category: React Answers

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.

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.