-webkit-text-fill-color not working with MUI theme variable

[angeloron]

Steps to reproduce

Steps:

1. Use ThemeProvider and CssBaseline
2. Try to use a Theme variable such as 'text.primary'

Current behavior

It will display 'text.primary' as the value

Expected behavior

In my case it should display "#FFFFFF" just like it does for the background-color in that example.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.26100
  Binaries:
    Node: 20.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 11.0.0 - ~\AppData\Roaming\npm\npm.CMD
    pnpm: 9.14.4 - ~\AppData\Roaming\npm\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (130.0.2849.56) -- I used Edge
  npmPackages:
    @emotion/react: ^11 => 11.13.3
    @emotion/styled: ^11 => 11.13.0
    @mui/base:  5.0.0-beta.61
    @mui/core-downloads-tracker:  6.1.6
    @mui/icons-material: ^6 => 6.1.6
    @mui/lab:  6.0.0-beta.14
    @mui/material: ^6 => 6.1.6
    @mui/material-nextjs: ^6 => 6.1.6
    @mui/private-theming:  6.1.6
    @mui/styled-engine:  6.1.6
    @mui/system:  6.1.6
    @mui/types:  7.2.19
    @mui/utils:  6.1.6
    @mui/x-date-pickers: ^7.23.3 => 7.23.3
    @mui/x-internals:  7.23.0
    @toolpad/core: 0.9.0 => 0.9.0
    @toolpad/utils:  0.9.0
    @types/react: ^18 => 18.3.12
    react: ^18 => 18.3.1
    react-dom: ^18 => 18.3.1
    typescript: ^5 => 5.6.3

Search keywords: -webkit-text-fill-color theme

[siriwatknp]

The shorthand values for palette only works with color, background, backgroundColor, and bgcolor (see https://mui.com/system/palette/).

I don't think -webkit-text-fill-color will support shorthand soon due to performance consideration (the more shorthand, the slower runtime).

To pull theme variable, please use a callback instead:

slotProps={{
  input: {
    sx: theme => ({
       '& .MuiInputBase-input.Mui-disabled': {
         WebkitTextFillColor: theme.palette.primary.main,
       }
    })
  }
}}

[siriwatknp]

I am closing this issue.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@angeloron How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.