Comments (4)
can you please explain more ?
from material-ui.
Sure, we have a MUI v4 theme where we have overrides setup which looks like this:
const theme = createTheme({
overrides: {
MuiButton: {
contained: {
backgroundColor: "grey",
},
},
},
});
Now, if we have a button here which doesn't have a color
defined f.e. <Button variant="contained">Grey</Button>
, this button will have the backgroundColor
from the overrides which is fine. But if a color="primary"
is added to the same button, it will no longer have the backgroundColor
from overrides but the actual primary
color. This is the expected behaviour.
This behaviour is explained in this codesandbox which uses MUI v4.
Now, we're trying to upgrade to v5. In MUI v5, after following the docs and everything, I updated my config for the overrides as per the migration guides and overrides look like this:
const theme = createTheme({
components: {
MuiButton: {
styleOverrides: {
contained: {
backgroundColor: "grey",
},
},
},
},
});
But after making this change and upgrading to v5, the behaviour is no longer the same as described above. Now, the overrides are being applied to both buttons regardless of color="primary"
defined or not which is not desirable. This behaviour can be seen in this codesandbox with MUI v5.
from material-ui.
The answer was posted on StackOverflow: https://stackoverflow.com/a/78167813.
from material-ui.
👋 Thanks for using our open-source projects!
We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.
For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!
If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
from material-ui.
Related Issues (20)
- CSP issue in React Project
- [material-ui][Typography] Migrating from v4 to v5 issue HOT 2
- [joy-ui] The latest betas aren't available on `latest` HOT 1
- [material-ui][docs] Continued reloading happening on Firefox HOT 1
- [material-ui] Not able to build the project when updating to Next.js 14.2.2 with v5.15.15 HOT 5
- [material-ui][TextField] TypeScript not working HOT 2
- [code-infra] Replace all references of event as e HOT 4
- [material-ui][theme] Array syntax doesn't work for values in styleOverrides in theme HOT 4
- MRT Infinite Scrolling with RTK Query HOT 1
- [docs-infra] Show plan on API pages
- [docs] need for a blog about how to optimize MUI
- [material-ui][Grid] Make the v2 component version stable
- [docs-infra] Using the right to left feature with browser translators HOT 5
- [joy-ui][Select] Floating label Select
- [material-ui][AlertTitle] Missing Typography props when using AlertTitle
- [joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color HOT 1
- [material-ui] Slider component twitching near 100 and 50 marks and A700/A400 marks not visible when sliding
- [material-ui][TableRow] Exported variable 'StyledTableRow' has or is using name 'UNDEFINED_VOID_ONLY'
- Button and few more MUI components' css styling are off when use with Bootstrap 5.3.3
- [system] Unnecessary media query with 0px breakpoints HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-ui.