Skip to content

[pickers] modularCssLayers theme feature breaks DigitalClock and MultiSectionDigitalClock layout #20486

@kosgdk

Description

@kosgdk

Steps to reproduce

Steps:
Open this link to live example: https://stackblitz.com/edit/n6ptahvr?file=src%2Findex.tsx

Current behavior

When modularCssLayers flag in theme is set to true, styles from mui.custom CSS layer break components layout:

Image Image

Expected behavior

Image

Context

No response

Your environment

npx @mui/envinfo
Browser: Google Chrome 142.0.7444.176 (Official Build) (64-bit)

  System:
    OS: Linux 5.0 undefined
  Binaries:
    Node: 20.19.1 - /usr/local/bin/node
    npm: 10.8.2 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: latest => 11.14.0 
    @emotion/styled: latest => 11.14.1 
    @mui/core-downloads-tracker:  7.3.5 
    @mui/material: latest => 7.3.5 
    @mui/private-theming:  7.3.5 
    @mui/styled-engine:  7.3.5 
    @mui/system:  7.3.5 
    @mui/types:  7.4.8 
    @mui/utils:  7.3.5 
    @mui/x-date-pickers: latest => 8.19.0 
    @mui/x-internals:  8.19.0 
    @types/react: latest => 19.2.7 
    react: latest => 19.2.0 
    react-dom: latest => 19.2.0 
    typescript: latest => 5.9.3 

Search keywords: DigitalClock, MultiSectionDigitalClock, modularCssLayers

Metadata

Metadata

Assignees

Labels

scope: pickersChanges related to the date/time pickers.type: bugIt doesn't behave as expected.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions