Способ воссоздать ввод материала-интерфейса с помощью варианта = обведено с помощью css

Question

В настоящее время я пытаюсь воссоздать материал-UI изложил ввод. Как вы можете видеть, цвет фона и входные данные различны, поэтому моя идея просто установить абсолютное положение метки и не выдвигать его. Любые идеи, как я могу достичь этого?

моя текущая реализация CSS:

дизайн материала:

  inputStyle: {
    padding: 10,
    borderBottomWidth: 0,
  },
  labelStyle: {
    color: colors.black,
    marginBottom: 5,
    top: props.isFocused ? -6 : 12,
    opacity: props.isFocused ? 1 : 0.8,
    left: 6,
    zIndex: 100,
    position: 'absolute',
    display: 'inline-block',
    fontSize: props.isFocused ? 12 : 16,
    fontWeight: 400,
    backgroundColor: colors.white,
  },
  inputContainerStyle: {
    width: '100%',
    borderColor: handleInputBorder(props.error),
    borderRadius: 5,
    borderWidth: 1,
    backgroundColor: colors.white,
    marginBottom: 10,
  },
  containerStyle: {
    paddingLeft: 0,
    paddingRight: 0,
  },
  rightIcon: props.rightIcon,

Answer 1

Я решил настроить цвет фона метки так, чтобы он отображал фон экрана, и немного приподнять его. Кажется, это решает мою проблему