What's the proper way to use browser specific styles?

[jorisw]

Hi,

I'm trying to use -webkit-text-fill-color to override disabled input text color on Safari.

Using such a style as part of an SxStyleProp however, yields a type error:

Type 'string' is not assignable to type 'SystemStyleObject'.

How do I use -webkit-text-fill-color as part of an SxStyleProp ?

My code:

export const disabledStyles: SxStyleProp = {
  cursor: 'default',

  '& select': {
    // Reset iOS / Safari disabled text color
    '-webkit-text-fill-color': '#A0A0BC',
  },
}

[jorisw]

Also asked in #1145

[jorisw]

Workaround:

const resetDisabledSelectOptionColor: CSSProperties = {
  WebkitTextFillColor: '#A0A0BC',
}


export const disabledStyles: SxStyleProp = {
  cursor: 'default',

  '& select, & option': resetDisabledSelectOptionColor,
}

[hasparus]

Hey, @jorisw, which version of Theme UI are you using? (This is already fixed in 0.4.0-rc.5)

[jorisw]

I am using 0.3.1, I did try some version of 0.4.0-rc to no avail, but will be happy to try again.

[hasparus]

Yeah, 0.4.0.-rc.3 was broken 🤕 Tell me how it went if you try rc.5 :)

This bug is on type-level only, so in case of 0.3.1 the thing we could do would be backporting the change to DefinitelyTyped.

[jorisw]

Yep, works with 0.4.0-rc.5 !