Comments (6)
It appears to be the 'backgroundImage' to blame, setting sx={{backgroundImage:'none'}}
clears the problem.
from material-ui.
I see it working as expected:
issue-41602.mp4
from material-ui.
from material-ui.
@ZeeshanTamboli See this screenshot, the CSS shows the correct colour, the on screen colour picker shows it is not the correct colour.
from material-ui.
@stampycode Apologies for not following the steps initially. This is the first time I've encountered this scenario. Isn't what's displayed in the browser's CSS correct? I'm using Windows OS, so I don't have access to a color picker tool.
If theres a
filter
or other element layer affecting the colour of the object on screen then the colour on screen won't match thebcss value either.
I'm unsure why there's a discrepancy between the color picker and CSS due to some "filter". However, I'll mark it as a bug.
Context
Trying to set the theme of my MUI app to use specific colours set via theme.
I'm curious why you used a color picker tool for this demo. Did you notice that the color defined in the theme wasn't being applied?
from material-ui.
@ZeeshanTamboli, no problem at all! I noticed it when I saw two components next to each other that were supposed to have the same colour but were clearly different, prompting me to look harder.
For Windows I recommend this colour picker tool published by Microsoft: https://learn.microsoft.com/en-us/windows/powertoys/color-picker
If you set sx={{backgroundImage:'none'}}
on the AppBar then the problem goes away - so I'm assuming the problem is that there's a partially transparent background gradient effect on the AppBar; maybe the AppBar gradient should be set to off if the background colour is applied, or if there needs to be a gradient then it should only affect the edges - the centre of the image should at least have the colour as defined by the site palette...
I understand the need for some components have colour variation for a non-flat appearance, but straying from a defined colour palette which might be corporate-mandated in many cases, without being documented, isn't helpful or obvious.
from material-ui.
Related Issues (20)
- [docs] Migrating from v4 to v5 - Missing details in documentation
- [material-ui][nextjs] 14.2.0 crashes with Error: Element type is invalid HOT 3
- [website] Improve products navbar HOT 1
- [material-ui] Next.js 14 with NX monorepo build fails on PonyfillGlobal HOT 3
- [docs-infra] Dark mode not persisting after switching from light mode HOT 8
- Module not found: Error: Can't resolve '@mui/base/className' in '/app/node_modules/********/ui-toolkit/node_modules/@mui/material/utils' HOT 1
- [joy-ui][Button] The user can see the text by highlighting when loading is true
- @mui/material incompatible with versions of @types/react > 18.2.60
- [system][docs] Missing content regarding possible Box's styling approaches HOT 1
- Autocomplete popupIcon icon is turning down HOT 3
- [website] Inconsistent card display at 100% zoom level HOT 1
- [system] useColorScheme should return null during hydration
- [material-ui][Menu] Submenu closes improperly HOT 5
- [website] Site responsiveness and adaptability when zooming HOT 4
- [material-ui][Menu] Issues building a context menu HOT 4
- [material-ui] Standardize event handler callbacks
- [material-ui][Autocomplete] click on helperText inside of Autocomplete component triggers input focus/option selection HOT 7
- [material-ui][Switch] Issues with styling before refreshing the page HOT 5
- Styleprovider doesn't seem to work on dynamically rendered components inside shadow dom HOT 5
- [material-ui][Switch] Unsupported color after upgrade @mui/material to 5.15.13 HOT 4
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.