Skip to content
Get help on Slack

Issue with Media plugin causing strange input styling in Studio

16 replies
Last updated: Mar 22, 2021
Anyone else seeing this strange input styling in the Studio? I'm not overriding any CSS colors, so not sure why this would be -- unless it's one of the plugins I'm using? (Media comes to mind as it has a dark theme)
Mar 19, 2021, 7:04 PM
I think 
--input-placeholder-color
should only act on the text. Any chance you have a dark mode Chrome extension installed? If you look at the Computed tab in your dev tools, can you trace the source of the background-color for the input?
Mar 19, 2021, 7:40 PM
Nope -- no dark mode extension, using the default chrome theme. It seems to actually be a style on that 
span
right after the 
input
Mar 19, 2021, 9:12 PM
The schemas for those two fields (it's also doing it for the longer 
text
type fields) is this if it's helpful:
    {
      name: 'title',
      type: 'string',
      title: 'Title',
    },
    {
      name: 'slug',
      title: 'Slug',
      type: 'slug',
      validation: (Rule) => Rule.required(),
      options: {
        source: 'title',
        maxLength: 32,
      },
    },
Mar 19, 2021, 9:13 PM
Hmm. As you said initially, it might be worth removing your plugins from sanity.json and (assuming that fixes those fields) adding them back in until it happens again.
Mar 19, 2021, 9:27 PM
Are all your component versions up-to-date? (
sanity versions
)
Mar 19, 2021, 9:29 PM
Yep, I upgraded everything a few hours ago -- I'll try toggling some plugins
Mar 19, 2021, 9:40 PM
Looks like it was the 
media
plugin! Will reach back out if the problem comes back, but it seems to be gone for now.
Mar 19, 2021, 9:44 PM
Interesting! Is the problem gone even after re-enabling the plugin?
Mar 19, 2021, 9:45 PM
Re-enabling it brings it back. It seems to specifically happen after opening and closing the Media tab. When first opening the Desk after re-enabling it, it didn't have the styling problem, but the Media browser uses the dark theme in @sanity/ui (
<ThemeProvider scheme="dark" theme={studioTheme}>
) per their code, so maybe it's a problem in @sanity/ui due to multiple themeproviders? unsure
Mar 19, 2021, 9:48 PM
having the same issue, didn’t realize this was posted today!

https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1616196439172500
Mar 19, 2021, 11:41 PM
That’s very strange - maybe
user G
has an idea why this might be happening.
Mar 20, 2021, 12:23 AM
Thanks for digging into it
user P
Mar 20, 2021, 12:35 AM
This is an issue with Media plugin - I did some customisation on my desk and then installed the Media library and it turned the input fields dark.I overwrite this with the following in a variableOverride.css



/* Fixes Plugin > Media causing Black Inputs */
*:not(:disabled) + span.sc-hTZhsR {
  background-color: #fff;
}
Mar 20, 2021, 9:45 AM
Thanks
user S
! Have you made an Issue on the repo?
Mar 20, 2021, 9:11 PM
Thanks for reporting this!
For those experiencing the issue – asides from updating sanity and the media plugin itself, have you tried nuking / reinstalling your node dependencies from scratch? I know that has resolved various 
styled-components
/ 
@sanity/ui
dependency issues in the past (which this could be linked to)
In any case, if that does (or doesn’t) work – I’d appreciate if you can post in this issue thread (
https://github.com/robinpyon/sanity-plugin-media/issues/31 ) so I can help better diagnose this. Thanks!
Mar 21, 2021, 1:45 PM
Thanks for chiming in User! 🙇‍♂️
Mar 22, 2021, 2:26 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?