使用css使用variant =概述重新创建material-ui输入的方法答案

【问题标题】：Way to recreate material-ui input with variant=outlined using css使用css使用variant =概述重新创建material-ui输入的方法
【发布时间】：2020-02-17 07:27:39
【问题描述】：

目前我正在尝试重新创建 material-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,

【问题讨论】：

请也分享 HTML 代码

标签： css react-native material-ui

【解决方案1】：

我决定调整标签背景颜色以表示屏幕背景并将其向上推一点。似乎解决了我的问题

【讨论】：

【解决方案2】：

我已经用 react.js 做了类似的事情。

这是我的实现。

MaterialInput.js

import React, { useEffect, useState } from 'react';
import { allColors } from '../../../shared/styles/index';
import './MaterialInput.scss';
import Eye from '../../../shared/images/eye.svg';
import HiddePassword from '../../../shared/images/hiddePassword.svg';



export default function Login() {
    const [labelColor, setLabelColor] = useState('#9d9994');
    const [inputColor, setInputColor] = useState('#d6d6d6');
    const [showButton, setShowButton] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
    const [inputValue, setInputValue] = useState('');

    useEffect(() => {
        if (inputValue.length && !showButton) return setShowButton(true);
        if (!inputValue.length) setShowButton(false);
    }, [inputValue]);

    const handleInputButton = () => {
        setShowPassword(!showPassword);
    }

    const handleOnFocus = () => {
        setLabelColor('#ff4f00');
        setInputColor('#ff4f00');
    }

    const handleOnBlur = () => {
        setLabelColor(inputValue ? '#696158' : '#9d9994');
        setInputColor('#d6d6d6');
    }

    const handleChange = (event) => {
        setInputValue(event.target.value);
    }

    return (
            <>
               <form style={{ paddingTop: '1em' }}>
                  <div style={{ borderColor: inputColor }} className="group">      
                     <input onChange={handleChange} value={inputValue} onFocus={handleOnFocus} onBlur={handleOnBlur} type={showPassword ? 'text' : 'password'} id="material-input" required/>
                     <label style={{ color: labelColor }} id="material-input-label">Contraseña</label>
                     <button onClick={handleInputButton} style={{ width: '3.3em', outline: 'none',  position: 'relative' }} type="button">
                {showButton && <img src={showPassword ? HiddePassword : Eye} />}
                    </button>
               </div>
           </form>
        </>
        )
      };

MaterialInput.scss

.group { 
  border:2px solid;
  border-radius: 8px;
  height: 48px;
  position: relative;
}

input  {
  font-size:14px;
  padding:10px 10px 10px 5px;
  width:300px;
  border:none;
  height: 44px;
  color: #696158;
  padding-right: 15px;
  padding-left: 15px; 
  border-radius: 8px;
  &:focus {
    outline:none;
  }
}


label                {
  font-size:14px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:15px;
  top:13px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
  background-color: white;
  padding-right: 0.3em;
  padding-left: 0.3em;
  display: flex;
  justify-content: center;
}

input:focus ~ label, input:valid ~ label  {
  top:-7px;
  font-size:12px;
  font-weight: 600;
}

::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    position: absolute;
    right: 0;
}

input:required {
    box-shadow:none;
}

【讨论】：