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 free Explore the demo

Platform

Features

Use cases

Integrations

Learn

Build and share

Frameworks

Discover

Customer stories

Popular guides

Issue with Media plugin causing strange input styling in Studio

Sanity– build remarkable experiences at scale

Was this answer helpful?