I have a React component named "Login.js" that utilizes forms and renders the following:-
return (
<div className="form-container">
<Form onSubmit={onSubmit} noValidate className={loading ? 'loading' : ''}>
<h1>Login</h1>
<Form.Input
label="Username"
placeholder="Enter your username..."
name="username"
type="text"
value={values.username}
error={errors.username ? true : false}
onChange={onChange}
/>
<Form.Input
label="Password"
placeholder="Enter your password..."
name="password"
type="password"
value={values.password}
error={errors.password ? true : false}
onChange={onChange}
/>
<Button type="submit" primary>
Login
</Button>
</Form>
{Object.keys(errors).length > 0 && (
<div className="ui error message">
<ul className="list">
{Object.values(errors).map((value) => (
<li key={value}>{value}</li>
))}
</ul>
</div>
)}
</div>
);
What is the process for changing the text color of the labels "Username" and "Password"? Should I create a new CSS file called "Login.css" within the components folder, import it into "Login.js", and make the modifications there? If so, can you please provide step-by-step instructions on how to accomplish this?