Override properties for components
See original GitHub issueI’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;
- What are correct names for the rest of the components recognized by MUI-Next? (Buttons, Typography, Lists, AppBar, Switches, etc)
- 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:
- Created 5 years ago
- Comments:6 (3 by maintainers)
Top 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 >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 FreeTop 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
Top GitHub Comments
Thanks! That really helped me get smaller radio buttons:
So how do I find the name for every component? Just add Mui in front of the component name?