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

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.