Label background is slightly mispositioned on web

[eugeneford]

Current behaviour

The background element for input label is slightly mispositioned on Web.

Preview

What have you tried so far?

I've managed to get a workaround by making a wrapper for TextInput component to add custom styles specifically for Web:

<>
  <MaterialTextInput
    mode={mode}
    textColor={textColor}
    activeOutlineColor={activeOutlineColor}
    style={[
      {backgroundColor: "#fff"},
      style,
    ]}
    {...rest}
  />
  {Platform.OS === "web" && (
    createElement("style", {
      dangerouslySetInnerHTML: {
        __html: `
        [data-testid="text-input-outlined-label-background"] {
          margin-top: -2px;
        }`
      }
    })
  )}
</>

[RichardLindhout]

It's only on latest react-native-web i downgraded for now to 0.18

[davidascii]

Duplicate of #3825

[davidascii]

Another possible workaround

<TextInputPaper
    mode="outlined"
    ...
    outlineStyle={{...(Platform.OS === 'web' && {marginTop: '2px'})}}
/>

I've tried manually changing the 'top' value of the label by -2, and it also fixes(?) the problem