[IconButton][customization] No option for declaring a variant
See original GitHub issueDuplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Steps:
- Add a
MuiIconButton
tocreateTheme()
- 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 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
it looks like IconButton itself doesn’t have variant prop. api docs : https://mui.com/material-ui/api/icon-button/#main-content
@hbjORbj Have you got any explanation for the error then? Just tried it again and got the same.
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?
If it’s missing in the API docs, is it possible part of the implementation is unfinished?