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)

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?

Nope -- no dark mode extension, using the default chrome theme. It seems to actually be a style on that

span

right after the

input

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,
      },
    },

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.

Are all your component versions up-to-date? (

sanity versions

)

Yep, I upgraded everything a few hours ago -- I'll try toggling some plugins

Looks like it was the

media

plugin! Will reach back out if the problem comes back, but it seems to be gone for now.

Interesting! Is the problem gone even after re-enabling the plugin?

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

having the same issue, didn’t realize this was posted today!

https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1616196439172500

That’s very strange - maybe

user G

has an idea why this might be happening.

Thanks for digging into it

user P

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;
}

Thanks

user S

! Have you made an Issue on the repo?

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!

Thanks for chiming in User! 🙇‍♂️

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for free Explore the demo

Issue with Media plugin causing strange input styling in Studio

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?