Giter VIP home page Giter VIP logo

Comments (1)

brijeshb42 avatar brijeshb42 commented on May 25, 2024

I found that the issue is due to invalid generated css causing other css to not be applied when enableCssLayer is enabled.

.css-1lszvsm-MuiSlider-thumb{position:absolute;width:20px;height:20px;box-sizing:border-box;border-radius:50%;outline:0;background-color:currentColor;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-transition:box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;transition:box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,bottom 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.css-1lszvsm-MuiSlider-thumb::before{position:absolute;content:"";border-radius:inherit;width:100%;height:100%;box-shadow:var(--md-demo-shadows-2);}.css-1lszvsm-MuiSlider-thumb::after{position:absolute;content:"";border-radius:50%;width:42px;height:42px;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.css-1lszvsm-MuiSlider-thumb.Mui-disabled:hover{box-shadow:none;}.css-1lszvsm-MuiSlider-thumb:hover,.css-1lszvsm-MuiSlider-thumb.Mui-focusVisible{box-shadow:0px 0px 0px 8px rgba(var(--md-demo-palette-primary-mainChannel) / 0.16);}@media (hover: none){.css-1lszvsm-MuiSlider-thumb:hover,.css-1lszvsm-MuiSlider-thumb.Mui-focusVisible{box-shadow:none;}}.css-1lszvsm-MuiSlider-thumb.Mui-active{box-shadow:0px 0px 0px 14px rgba(var(--md-demo-palette-primary-mainChannel) / 0.16);}

top:50%;
-webkit-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-ms-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);

Note that the last 5 properties are stray without any wrapper selector. Need to look more into why this is happening.

cc: @siriwatknp

from material-ui.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.