styled() options.slot/options.overridesResolver doesn't appear to automatically apply Root overrides like the docs say

[waweber]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

The example div should have a red background. Instead, it is blue, as the style override was not applied.

Expected behavior 🤔

According to the docs for styled() on this page, the options.slot property has the following description:

options.slot (string [optional]): If Root, it automatically applies the theme's styleOverrides & variants.

If I provide {name: "Example", slot: "Root"} my style override should automatically be applied (for root, I assume)

Steps to reproduce 🕹

Code sandbox: https://codesandbox.io/embed/crazy-http-gtnyp0?fontsize=14&hidenavigation=1&theme=dark

You can see the difference between the two Example components, where one has its overridesResolver explicitly implemented.

Context 🔦

I'm making various components that I would like to be easily customizable globally, just like the ones Mui provides. This would be easier if style overrides were automatically applied.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.16 Fedora Linux 35 (KDE Plasma)
    CPU: (8) x64 AMD Ryzen 5 1500X Quad-Core Processor
    Memory: 3.72 GB / 15.61 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.14.0 - /usr/bin/node
    npm: 8.3.1 - /usr/bin/npm
  Managers:
    Cargo: 1.58.0 - /usr/bin/cargo
    Maven: 3.6.3 - /usr/bin/mvn
    pip3: 21.3.1 - ~/.local/bin/pip3
    RubyGems: 3.2.22 - /usr/bin/gem
    Yum: 4.9.0 - /usr/bin/yum
  Utilities:
    CMake: 3.22.2 - /usr/bin/cmake
    Make: 4.3 - /usr/bin/make
    GCC: 11.2.1 - /usr/bin/gcc
    Git: 2.35.1 - /usr/bin/git
    Mercurial: 5.9.3 - /usr/bin/hg
    Subversion: 1.14.1 - /usr/bin/svn
    FFmpeg: 4.4.1 - /usr/bin/ffmpeg
  Virtualization:
    Docker: 20.10.12 - /usr/bin/docker
    VirtualBox: 6.1.32 - /usr/bin/vboxmanage
  IDEs:
    Nano: 5.8 - /usr/bin/nano
    VSCode: 1.64.2 - /usr/bin/code
    Vim: 8.2 - /usr/bin/vim
  Languages:
    Bash: 5.1.8 - /usr/bin/bash
    Go: 1.16.14 - /usr/bin/go
    Java: 11.0.14.1 - /usr/bin/javac
    Perl: 5.34.0 - /usr/bin/perl
    Python: 3.10.2 - /usr/bin/python
    Python3: 3.10.2 - /usr/bin/python3
    Ruby: 3.0.2 - /usr/bin/ruby
    Rust: 1.58.1 - /usr/bin/rustc
    Scala: 2.13.7 - /usr/bin/scalac
  Databases:
    MySQL: 10.5.13 (MariaDB) - /usr/bin/mysql
    SQLite: 3.36.0 - /usr/bin/sqlite3
  Browsers:
    Chrome: 98.0.4758.102
    Firefox: 97.0.1

[mnajdova]

Good catch, it applies only for the variants, we depend on the overridesResolver being added for the styleOverrides. I will update the documentation now.

Codesandbox - https://codesandbox.io/s/sweet-gwen-n7v9i5?file=/src/Demo.jsx (variants are applied, styleOverrides only if overridesResolver is added).

[waweber]

@mnajdova since variants seem to have recently been deprecated in favor of passing callbacks in styleOverrides, is there a more correct way to do what you did for Example1 there?

I realize I can wrap my own styled() function with a default overridesResolver, but maybe it could be helpful if this was default behavior?

[mnajdova]

We are not 100% sure that variants will be out, we just reverted the deprecations, so that we don't set a wrong impression until we are certain about the API changes. In my opinion, as we already support callback in the style overrides, using styleOverrides as callback and adding the overridesResolver is the best option.

The variant API is not out yet, as it encourages more declarative way of defining style overrides, similarly to how designers would define them and Figma, and is much better suited for low code tools. See #30412 (comment) for more details.

We could automate the adding of the style overrides based on the slot root, for example adding the root styles on the Root slot, the icon styles to the Icon slot etc. We haven't done it so far, because we anyway need to add the overridesResolver to support all classes keys we have since v4. I will create an RFC on this and link this issue so that you can track the progress on it.