Refactor PasswordField component styling
parent
89514653ce
commit
ea5e15bf45
|
@ -1,17 +1,16 @@
|
|||
import React, { useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { InputAdornment, TextField, makeStyles, IconButton } from "@mui/material";
|
||||
import { InputAdornment, TextField, IconButton } from "@mui/material";
|
||||
import { Visibility, VisibilityOff, LockOutlined } from "@mui/icons-material";
|
||||
|
||||
const useStyles = makeStyles(theme => ({
|
||||
const styles = {
|
||||
margin: {
|
||||
margin: theme.spacing(1)
|
||||
margin: 1
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
const PasswordField = ({ label, ...rest }) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const classes = useStyles();
|
||||
|
||||
const handleClickShowPassword = () => {
|
||||
setShowPassword(!showPassword);
|
||||
|
@ -23,7 +22,7 @@ const PasswordField = ({ label, ...rest }) => {
|
|||
|
||||
return (
|
||||
<TextField
|
||||
className={classes.margin}
|
||||
sx={styles.margin}
|
||||
label={label || "Password"}
|
||||
{...rest}
|
||||
type={showPassword ? "text" : "password"}
|
||||
|
|
Loading…
Reference in New Issue