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.

Override properties for components

See original GitHub issue

I’m trying to use overrides to style my app accordingly without creating so many classNames. However, I can’t find a list of names that MUI will recognize as well as the allowed properties it will allow me to override.

For instance, If I want to override the Tabs I found that I can use MuiTabs. Then I can override the root and inside the root it accepts background: '#2D323E', and color: '#d0d2d7', Something like this

export const DarkOrangeTheme = {
   palette: {
   },
   overrides: {
      MuiTabs: {
         root: {
             background: '#2D323E',
             color: '#d0d2d7',         
         },
      },
   },
};

export default DarkOrangeTheme;
  1. What are correct names for the rest of the components recognized by MUI-Next? (Buttons, Typography, Lists, AppBar, Switches, etc)
  2. What properties will each of them accept? (background, color, checked, selected, height, padding, fontWeight, etc… )

A similar approach to how MUI v.0 overriding was done

toggle: {
    thumbOnColor: deepOrange900,
    thumbOffColor: '#BDBDBD',
    trackOnColor: deepOrange800,
    trackOffColor: '#717171',
    trackDisabledColor: '#50535a',
    thumbDisabledColor: '#3d4454',
},
listItem: {
    primaryTextColor: deepOrange900,
},
stepper: {
    backgroundColor: deepOrange900,
    hoverBackgroundColor: deepOrange900,
    iconColor: '#2D323E',
    hoveredIconColor: '#2D323E',
    inactiveIconColor: '#717171',
    textColor: '#2D323E',
    disabledTextColor: '#d0d2d7',
    connectorLineColor: '#d0d2d7',
},

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
shirazecommented, Jun 28, 2019

Thanks! That really helped me get smaller radio buttons:

     MuiRadio: {
      root: {
        height: theme.spacing(4),
        width: theme.spacing(4),
        backgroundColor: "transparent",
        "& .$MuiSvgIcon-root": {
          fontSize: "1.25rem",
        },
      },
    },
1reaction
lotusmscommented, May 2, 2018

So how do I find the name for every component? Just add Mui in front of the component name?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Apply overrides to instances - Components
Overrides are changes you make to the properties of a single instance. They allow you to customize an instance to suit its new...
Read more >
Overriding Component Properties
To override the properties, I just have to create an osgi/configs/com.dnebinger.control.panel.test.internal.portlet.MyControlPanelPortlet.cfg file. Note the ...
Read more >
Design Systems with Adobe XD Course - YouTube
Lesson 3.2#Adobe #XD #UX #designsystems # components # override. ... Overriding Component Properties | Design Systems with Adobe XD Course.
Read more >
How Do You Override Components in Figma?
Select the property you want to override and then click on the “Override” button again. This will bring up a menu of all...
Read more >
Override Properties in Spring's Tests
In this section, we'll learn how to override properties by using the TestPropertySourceUtils class in the ApplicationContextInitializer. The ...
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