Issue with Media plugin causing strange input styling in Studio
16 repliesLast 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-colorshould 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
spanright after the
input
The schemas for those two fields (it's also doing it for the longer
texttype 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
mediaplugin! 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 () per their code, so maybe it's a problem in @sanity/ui due to multiple themeproviders? unsure
<ThemeProvider scheme="dark" theme={studioTheme}>having the same issue, didn’t realize this was posted today!
https://sanity-io-land.slack.com/archives/C9Z7RC3V1/p1616196439172500
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
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!
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/uidependency 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! 🙇♂️
Was this answer helpful?
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.
