Category: React

Sometimes, we want to enlarge the SVG icon in React Material UI icon buttons.

In this article, we’ll look at how to enlarge the SVG icon in React Material UI icon buttons.

How to enlarge the SVG icon in React Material UI icon buttons?

To enlarge the SVG icon in React Material UI icon buttons, we can call the makeStyles function.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  deleteIcon1: {
    "& svg": {
      fontSize: 25
    }
  },
  deleteIcon2: {
    "& svg": {
      fontSize: 50
    }
  },
  deleteIcon3: {
    "& svg": {
      fontSize: 75
    }
  },
  deleteIcon4: {
    "& svg": {
      fontSize: 100
    }
  }
}));
export default function App() {
  const classes = useStyles();

  return (
    <div className="App">
      <IconButton className={classes.deleteIcon1}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon2}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon3}>
        <DeleteIcon />
      </IconButton>

      <IconButton className={classes.deleteIcon4}>
        <DeleteIcon />
      </IconButton>
    </div>
  );
}

We call makeStyles with a function that returns the classes with the & svg set to the size of the SVG icon.

We use '& svg' to select the SVG icon and set that to an object with the font size we want.

Then we apply the styles by setting the className of the IconButton to the styles returned by useStyles.

As a result, we should see the icon size being different for each icon.

Conclusion

To enlarge the SVG icon in React Material UI icon buttons, we can call the makeStyles function.

Sometimes, we want to apply different color to the AppBar title with React Material UI.

In this article, we’ll look at how to apply different color to the AppBar title with React Material UI.

How to apply different color to the AppBar title with React Material UI?

To apply different color to the AppBar title with React Material UI, we can use the makeStyles function.

For instance, we write:

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

const useStyles = makeStyles(() => ({
  title: {
    color: "yellow",
    flexGrow: 1
  }
}));

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

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

We call makeStyles with a function that returns the styles we want for the title.

We set the color to yellow and flexGrow to 1 to make it fill any available space.

Then we set the className of the Typography component to classes.title to apply the styles in the title class.

As a result, we see that the color of the title is yellow.

Conclusion

To apply different color to the AppBar title with React Material UI, we can use the makeStyles function.

Sometimes, we want to align a component to the center or right with React Material UI.

In this article, we’ll look at how to align a component to the center or right with React Material UI.

How to align a component to the center or right with React Material UI?

To align a component to the center or right with React Material UI, we can add a flex container with the Grid component.

For instance, we write:

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

export default function App() {
  return (
    <Grid container justify="flex-end">
      <Button>Example</Button>
    </Grid>
  );
}

We add the Grid component and add the container prop to make it a flexbox container.

Then we set the justify prop to flex-end to align the child components on the right side.

As a result, the Example button should stay on the right side of the page.

Conclusion

To align a component to the center or right with React Material UI, we can add a flex container with the Grid component.

Sometimes, we want to use theme and props in React Material UI makeStyles.

In this article, we’ll look at how to use theme and props in React Material UI makeStyles.

How to use theme and props in React Material UI makeStyles?

To use theme and props in React Material UI makeStyles, we call it with a function that returns the styles.

We can get preset styles of the theme from the theme parameter.

And we can set the class property to a function that has props as the parameter and return an object with the style values given the props.

For instance, we write:

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

const useStyles = makeStyles((theme) => ({
  mySelector: (props) => ({
    display: "block",
    width: props.width,
    height: props.height,
    marginTop: theme.spacing(2),
    marginBottom: theme.spacing(2),
    backgroundColor: "yellow"
  })
}));

const MyComponent = () => {
  const styleProps = { width: "100px", height: "100px" };
  const classes = useStyles(styleProps);

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

export default function App() {
  return <MyComponent />;
}

We call makeStyles with a function that returns an object with the mySelector class.

We set mySelector to a function that takes the props parameter and returns a style object.

We set the width to props.width, height to props.height.

And we set the margins to theme.spacing(2).

Then in MyComponent, we call useStyles with styleProps to set the dimensions of the div.

As a result, we should see the div displayed as a square.

Conclusion

To use theme and props in React Material UI makeStyles, we call it with a function that returns the styles.

We can get preset styles of the theme from the theme parameter.

And we can set the class property to a function that has props as the parameter and return an object with the style values given the props.

Sometimes, we want to override the width of a TextField component with React Material UI.

In this article, we’ll look at how to override the width of a TextField component with React Material UI.

How to override the width of a TextField component with React Material UI?

To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it.

For instance, we write:

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

export default function App() {
  return (
    <div>
      <TextField
        label="Label"
        placeholder="Placeholder"
        helperText="Full width!"
        margin="normal"
        fullWidth
      />
    </div>
  );
}

We set the fullWidth prop to true to make the TextField fill the parent container.

Conclusion

To override the width of a TextField component with React Material UI, we can add the fullWidth prop to it.