Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[IconButton][customization] No option for declaring a variant

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Steps to reproduce 🕹

Steps:

Add a MuiIconButton to createTheme()
Attempt to give it a variant prop

It’s worth mentioning I’m using TypeScript, but had no trouble setting up a Button variant. It came up as an Intellisense option before I even declared the module.

Current behavior 😯

On IconButton, it does not even appear as a suggested option by VS Code Intellisense. And produces an error.

Expected behavior 🤔

No response

Context 🔦

I’d like to customise multiple IconButton styles to match my custom Button styles. I’m currently unable to.

Your environment 🌎

npx @mui/envinfo

  System:
    OS: Linux 5.10 Ubuntu 18.04.5 LTS (Bionic Beaver)
  Binaries:
    Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node
    Yarn: Not Found
    npm: 8.19.3 - ~/.nvm/versions/node/v16.18.1/bin/npm
  Browsers:
    Chrome: 107.0.5304.110
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.10.5 => 11.10.5 
    @emotion/styled: ^11.10.5 => 11.10.5 
    @mui/icons-material: ^5.10.16 => 5.10.16 
    @mui/material: ^5.10.17 => 5.10.17 
    @types/react: ^18.0.25 => 18.0.26 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^4.9.0 => 4.9.4

Issue Analytics

State:
Created 9 months ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

sai6855commented, Dec 13, 2022

it looks like IconButton itself doesn’t have variant prop. api docs : https://mui.com/material-ui/api/icon-button/#main-content

0reactions

NashJamescommented, Dec 28, 2022

@hbjORbj Have you got any explanation for the error then? Just tried it again and got the same.

I’ve got a variant working perfectly for MuiButton.

A missing interface declaration like below errors differently so I doubt it’s that. Also, not sure why your sandbox doesn’t throw a TS error for a custom variant name without the override?

declare module '@mui/material/IconButton' {
  interface IconButtonPropsVariantOverrides {
    test: true
  }
}

If it’s missing in the API docs, is it possible part of the implementation is unfinished?

Top Results From Across the Web

Create and use variants - Components - Figma Help Center

Customize the properties and values of your variants, to take the guesswork out of your design system and bring your components closer to...

How to use Material UI custom variants in React with Typescript

To extend Typography variant s you can do so: import React from "react"; import { Typography, TypographyProps, createTheme, ThemeOptions, ...

React Button component - Material UI - MUI

The Button comes with three variants: text (default), contained, and outlined. ... Icons are also appropriate for toggle buttons that allow a single...

Button Icons - Lightning Design System

Some styling variations require the button to receive additional 'container' classes that remove the button styling and/or add borders. See below for more ......

Figma Tutorial: Variants - YouTube

Figma is free to use. Sign up here: https://bit.ly/3msp0OVVariants reduce the complexity of your design system, makes it easier to find ...