Change font size of groupBy and option text in material ui autocomplete without changing input box size

Question

I am using material ui and reactjs for having grouped autocomplete.

Below is the code.

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Typography from "@material-ui/core/Typography";

export default function Grouped() {
  top100Films = top100Films.sort((a, b) =>
    a.genre.toLowerCase() > b.genre.toLowerCase() ? 1 : -1
  );
  return (
    <Autocomplete
      id="grouped-demo"
      options={top100Films}
      groupBy={(option) => option.genre}
      getOptionLabel={(option) => option.title}
      sx={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="With categories" />
      )}
      
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top

let top100Films = [
  { title: "The Shawshank Redemption", genre: "thriller" },
  { title: "The Dark Knight", genre: "super hero" },
  { title: "The Godfather: Part II", genre: "thriller" },
  { title: "12 Angry Men", genre: "war" },
  { title: "Schindler's List", genre: "war" },
  { title: "superman", genre: "super hero" },
  { title: "The Godfather", genre: "thriller" },
  {
    title: "The Lord of the Rings: The Return of the King",
    genre: "adventure"
  }
];

Below is the link to codesandbox

https://codesandbox.io/s/fontsize-8n6ovr?file=/demo.js:0-1195

I only want to change font size of groupBy and options text, without changing the size of input box.

Tried using Typography but wasn't able to achieve it. Please help me do it.

Thanks in advance!

Answer 1

@hgb123 thank you for helping.

Extending his answer, Below is the code for both options and groupBy text including class based and hooks based component

class based component

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

import { withStyles } from "@material-ui/core/styles";

const useStyles = (theme) => ({
  option: {
    fontSize: "20px"
  }
});

class Grouped extends React.Component {
  top100Films = top100Films.sort((a, b) =>
    a.genre.toLowerCase() > b.genre.toLowerCase() ? 1 : -1
  );

  render() {
    const { classes } = this.props;
    return (
      <Autocomplete
        classes={{ option: classes.option }}
        id="grouped-demo"
        options={top100Films}
        groupBy={(option) => option.genre}
        getOptionLabel={(option) => option.title}
        sx={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="With categories" />
        )}
        renderGroup={(params) => (
          <Box key={params.key}>
            <Typography fontSize={40}>{params.group}</Typography>
            {params.children}
          </Box>
        )}
      />
    );
  }
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top

let top100Films = [
  { title: "The Shawshank Redemption", genre: "thriller" },
  { title: "The Dark Knight", genre: "super hero" },
  { title: "The Godfather: Part II", genre: "thriller" },
  { title: "12 Angry Men", genre: "war" },
  { title: "Schindler's List", genre: "war" },
  { title: "superman", genre: "super hero" },
  { title: "The Godfather", genre: "thriller" },
  {
    title: "The Lord of the Rings: The Return of the King",
    genre: "adventure"
  }
];

export default withStyles(useStyles)(Grouped);
// incase of redux
// import { compose } from 'redux';
// export default compose(connect(mapStateToProps, mapDispatchToProps),withStyles(useStyles))(Grouped) 

Hooks based component

import * as React from "react";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import { makeStyles } from "@material-ui/core/styles";

useStyles = makeStyles(() => ({

  // stands for .MuiAutocomplete-option
  option: {
    fontSize: "20px"
  }
}));

export default function Grouped() {
  top100Films = top100Films.sort((a, b) =>
    a.genre.toLowerCase() > b.genre.toLowerCase() ? 1 : -1
  );


  const classes = useStyles();
  return (
    <Autocomplete
      classes={{  option: classes.option }}
      id="grouped-demo"
      options={top100Films}
      groupBy={(option) => option.genre}
      getOptionLabel={(option) => option.title}
      sx={{ width: 300 }}
      renderInput={(params) => (
        <TextField {...params} label="With categories" />
      )}
      renderGroup={(params) => (
        <Box key={params.key}>
          <Typography fontSize={40}>
            {params.group}
          </Typography>
          {params.children}
        </Box>
      )}
    />
  );
}

// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top

let top100Films = [
  { title: "The Shawshank Redemption", genre: "thriller" },
  { title: "The Dark Knight", genre: "super hero" },
  { title: "The Godfather: Part II", genre: "thriller" },
  { title: "12 Angry Men", genre: "war" },
  { title: "Schindler's List", genre: "war" },
  { title: "superman", genre: "super hero" },
  { title: "The Godfather", genre: "thriller" },
  {
    title: "The Lord of the Rings: The Return of the King",
    genre: "adventure"
  }
];

Below is the link to codesandbox

https://codesandbox.io/s/fontsize-forked-qhyvkn?file=/demo.js

We can also do it without styles (withStyles, useStyles) by removing classes={{ option: classes.option }} from Autocomplete and its related code from the file and adding Typography in renderGroup <Typography fontSize={40}> {params.children}<Typography fontSize={40}>

renderGroup={(params) => (
        <Box key={params.key}>
          <Typography fontSize={40}>
            {params.group}
          </Typography>
          <Typography fontSize={40}> //adding this
           {params.children}
          <Typography fontSize={40}>
        </Box>
      )}
    />

Hope this helps someone!

Answer 2

You could use renderGroup prop

The prop type is function whose signature is

function(params: AutocompleteRenderGroupParams) => ReactNode

And according to the type definition of AutocompleteRenderGroupParams, we could know the properties of params

export interface AutocompleteRenderGroupParams {
  key: string;
  group: string;
  children?: React.ReactNode;
}

From all the given, we could customize the group render accordingly

      renderGroup={(params) => (
        <Box key={params.key}>
          <Typography fontSize={20} fontStyle="italic" p={1}>
            {params.group}
          </Typography>
          {params.children}
        </Box>
      )}

Codesandbox Demo

References

Autocomplete API, where we could find detail info for renderGroup prop

Autocomplete.d.ts, where we could find type definition for AutocompleteRenderGroupParams