Comments (5)
I found it. It wasn't in preact either it was me that used preacts register function wrong. I did the mistake of registering my component with {shadow: true} and seettig my shadowContainer to the shadow root of this newly registered element. If I do more like in mui example and register with {shadow: false} and then attach shadow contenler and append shadowRootElement it works. I will close this issue. Thanks for the help though. I appriciate it.
from material-ui.
I realized what I was doing wrong.
from material-ui.
@codeHul
Fixed check this link
The issue you're facing stems from the way the Slider components are being dynamically rendered with props. In React, when you dynamically render components in a loop, you need to ensure that each component has its own set of props.
In your code, you're using the same defaultValue and color props for all dynamically rendered Slider components. This results in all sliders having the same value and color.
To fix this issue, you need to ensure that each Slider component receives its own unique set of props. You can achieve this by accessing the specific properties of each dimensions object in the map function.
The dimensions variable inside the map callback represents each object in the dims array. Each dimensions object contains properties like color and defaultValue, which are used to customize the Slider components being rendered dynamically.
from material-ui.
Gosh. I feel stupid now. I can see the mistake in my example. I however did not do the same mistake in my real app and there I get just a skeleton and the styles remain in document head. My app is made in preact and unfortunately I made the example in react. Could it be a preact issue? I'll try to reproduce it.
from material-ui.
@codeHul Yes sure please share
from material-ui.
Related Issues (20)
- [joy-ui][Select] Floating label Select HOT 7
- [material-ui][AlertTitle] Missing Typography props when using AlertTitle HOT 4
- [joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color HOT 2
- [docs][material-ui] Slider in color customization playground twitches when sliding HOT 6
- [material-ui][TableRow] Exported variable 'StyledTableRow' has or is using name 'UNDEFINED_VOID_ONLY' HOT 5
- [material-ui] Button and few more components CSS styling are off when use with Bootstrap 5.3.3 HOT 2
- [system] Unnecessary media query with 0px breakpoints HOT 3
- [material-ui] How to optimize the installed Material UI package? HOT 3
- [@mui/styles] React 17 dependency HOT 1
- [code-infra] Migration to ESLint v9
- [core] Compatibility with React 19 types HOT 1
- [docs] Introduce User Persona for Enhanced Portuguese/Brazilian Documentation HOT 1
- [material ui][PaginationItem] Pagination Item component crashes due to a null check missing for contrastText HOT 8
- [material-ui] CSS rule "& > *" not working for some components after the migration from v4 to v5 HOT 4
- [material-ui][Grid] faulty wrapping on firefox if container has non-integer pixel width HOT 2
- [material-ui] Cannot globally override `margin`/`margin-*` CSS properties of elements represented by `Typography` HOT 4
- [material-ui][Modal] Enhanced Modals Manager with Multi-step Modal Support and Confirm Modal Component HOT 1
- [docs-infra] Demo toolbar buttons can't be accessed via keyboard HOT 2
- [question] How can I render a specific value in an Autocomplete component differently? HOT 4
- [docs-infra] Hide Tailwind variables from the dev tools when not used
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.