question-mark
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:

  1. Add a MuiIconButton to createTheme()
  2. 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.

image

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:open
  • Created 9 months ago
  • Comments:5 (2 by maintainers)

github_iconTop 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.

image 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?

Read more comments on GitHub >

github_iconTop 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...
Read more >
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, ...
Read more >
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...
Read more >
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 ......
Read 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 ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found