Ширина компонента пароля Primereact не соответствует контейнеру ⇐ CSS

[Anonymous]

Я новичок в React и начал работать над страницей регистрации. Я пытаюсь подогнать пароль под контейнер, но, похоже, это не имеет значения, какой бы метод я ни пробовал. Есть ли вообще способ изменить ширину компонента пароля Primereact?
Это полный код моей страницы:

Код: Выделить всё

import React, { useState, useRef } from 'react';
import { Password } from 'primereact/password';
import { FaCheckCircle } from 'react-icons/fa';
import clsx from 'clsx';
import { ClipLoader } from 'react-spinners';
import styles from '../styles/AuthPage.module.css';
import { useFormValidator } from '../hooks/useFormValidator';

function SignUpPage() {
const [form, setForm] = useState({
email: '',
password: '',
});
const { errors, validateForm, onBlurField } = useFormValidator(form);
const [successMessage, setSuccessMessage] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);

const emailRef = useRef(null);
const passwordRef = useRef(null);

const onUpdateField = e => {
const field = e.target.name;
const nextFormState = {
...form,
[field]: e.target.value,
};
setForm(nextFormState);
if (errors[field].dirty)
validateForm({
form: nextFormState,
errors,
field,
});
};

const focusFirstErrorField = () => {
if (errors.email.dirty && errors.email.error) {
emailRef.current.focus();
} else if (errors.password.dirty && errors.password.error) {
passwordRef.current.focus();
}
};

const handleKeyDown = (e) => {
if (e.key === 'Tab' && e.target.name === 'email') {
e.preventDefault();
passwordRef.current.focus();
}
};

const handleSubmit = async (e) => {
e.preventDefault();
setError('');
setSuccessMessage('');

const { isValid } = validateForm({ form, errors, forceTouchErrors: true });
if (!isValid) {
focusFirstErrorField();
return;
}

setIsLoading(true);

try {
const response = await fetch('http://localhost:5000/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email: form.email, password: form.password }),
});

if (!response.ok) {
const errorData = await response.json();
setError(errorData.errors ? errorData.errors.map(e => e.msg).join(', ') : 'Failed to create an account');
setIsLoading(false);
focusFirstErrorField();
return;
}

const data = await response.json();
console.log('Sign up successful:', data);
setSuccessMessage('Sign up successful! You can now log in.');
setForm({ email: '', password: '' });
setIsLoading(false);
} catch (error) {
setError('Failed to create an account.  Please try again later.');
console.error('Failed to create an account', error);
setIsLoading(false);
}
};

return (

Sign Up


Email

{errors.email.dirty && errors.email.error && (

{errors.email.message}

)}

Password
className={clsx(
styles.formField,
errors.password.dirty && errors.password.error && styles.error
)}
aria-label="Password field"
name="password"
value={form.password}
onChange={onUpdateField}
onBlur={onBlurField}
feedback={true}
toggleMask
inputStyle={{ width: '100%' }}
ref={passwordRef}
/>
{errors.password.dirty && errors.password.error && (

{errors.password.message}

)}


{isLoading ? 'Signing Up...' : 'Sign Up'}


{isLoading && (



)}
{successMessage && (

 {successMessage}

)}
{error && {error}}


);
}

export default SignUpPage;

Я пробовал использовать встроенный стиль с помощью inputstyle, style и пытался стилизовать класс из CSS, но, похоже, ничего не работает. Что мне не хватает?

Подробнее здесь: https://stackoverflow.com/questions/785 ... -container