Aprendo a usar componentes con estilo en reaccionar lo hago paso a paso siguiendo el video. tengo este trozo de codigo tengo un problema con esta linea y otras tambien
color: ${(props) => (props.invalid ? "red" : "black")}VS Code me dice esto
"La propiedad 'no válida' puede no existir en el tipo 'ThemedStyledProps<Pick<DetailedHTMLProps<HTMLAttributes, HTMLDivElement>, "key" | keyof HTMLAttributes> & { ...; }, any>'. ¿Quiso decir 'onInvalid'?ts( 2568)"
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> import React, { useState } from "react"; import styled from "styled-components"; import Button from "../../UI/Button/Button"; import "./CourseInput.css"; const FormControl = styled.div` margin: 0.5rem 0; & label { font-weight: bold; display: block; margin-bottom: 0.5rem; color: ${(props) => (props.invalid ? "red" : "black")} } & input { display: block; width: 100%; border: 1px solid ${(props) => (props.invalid ? "red" : "#ccc")}; background: ${(props) => (props.invalid ? "red" : "transparent")} font: inherit; line-height: 1.5rem; padding: 0 0.25rem; } & input:focus { outline: none; background: #fad0ec; border-color: #8b005d; } `; const CourseInput = (props) => { const [enteredValue, setEnteredValue] = useState(""); const [isValid, setIsValid] = useState(true); const goalInputChangeHandler = (event) => { //set back true if (event.target.value.trim().length > 0) { setIsValid(true); } setEnteredValue(event.target.value); }; const formSubmitHandler = (event) => { event.preventDefault(); if (enteredValue.trim().length === 0) { //trim deletes white spacec overall setIsValid(false); return; } props.onAddGoal(enteredValue); }; return ( <form onSubmit={formSubmitHandler}> {/* <div className={`form-control ${!isValid ? "invalid" : ""}`}> */} <FormControl invalid={!isValid}> <label>Course Goal</label> <input type="text" onChange={goalInputChangeHandler} /> </FormControl> {/* </div> */} <Button type="submit">Add Goal</Button> </form> ); }; export default CourseInput;Dado que invalid no es un accesorio que el elemento div conoce de forma predeterminada, no lo reconoce.
Para superar esto, puede proporcionar accesorios de FormControl con la tecla "$" de la siguiente manera:
<FormControl $invalid={!isValid}>Luego, dentro de FormControl:
color: ${(props) => (props.$invalid ? "red" : "black")}