Estoy tratando de modificar un botón dependiendo de cada página donde se importe. Echemos un vistazo a mi componente de botón.
import React from "react"; import "./Button.css"; export interface Props { marginLeft?: string; name?: string; backgroundColor?: string; color?: string; width?: string; onClick?: () => void; border?: string; fontWeight?: number; fontSize?: string; lineHeight?: string; marginBottom?: string; height?: string; display?: string; alignItems?: string; } export const Button: React.FC<Props> = ({ name, backgroundColor, onClick, color, border, width, height, marginLeft, fontWeight, fontSize, lineHeight, marginBottom, display, alignItems, }) => { return ( <button className="myButton" style={{ background: backgroundColor, color: color, border: border, width: width, marginLeft: marginLeft, fontWeight: fontWeight, fontSize: fontSize, lineHeight: lineHeight, marginBottom: marginBottom, height: height, alignItems: alignItems, display: display, }} onClick={onClick} > {name} </button> ); }; export default Button;El problema viene de mi mentor. Dijo que no debería hacer esto como enviar a través de accesorios mi css... y me sugirió cambiarlo y usar un nombre de clase en cada lugar específico donde importo mi botón y quería cambiar algo.
Así es como lo hice hasta que me sugirió que lo cambiara.
<Button backgroundColor="white" border="1px solid #595959" width="100%" name="Add a team member + " color="#595959" fontWeight={200} height="52px" marginBottom="25px" /> <Button width="13%" name="Submit Project" border="none" color="#FFFFFF" />y no sé exactamente cómo puedo escribir className en un componente. Quiero decir, cada vez que intento hacer algo, recibo un error que me sugiere que no puede ser posible hacerlo. ¿Me pueden orientar sobre cómo debo hacerlo? Le preguntaría a mi mentor si no daba tanto miedo... no sonríe tanto... sabes que es un programador de más de 8 años.
Podría simplemente crear una clase css para cada variación del botón que desee y luego escribir su componente de botón de esta manera:
const Button = ({class, name}) => { return ( <button className={class}>{name}<button/> ) }y cuando quieras usar el Botón
<Button class='class1' name="Button with class 1"/>Estamos creando botones como componentes comunes para reutilizar el componente y reducir la repetición del código, si está pasando todos los valores de estilo y accesorios de todos los componentes principales (donde se usa el botón), entonces no hay ninguna ventaja en el componente común o la reutilización del código porque está duplicando todo en todos los componentes principales. lo que debería sugerir es crear algunas clases de CSS para botones de estilo similar, digamos que tiene 3 tipos de botones
Entonces, para estos casos, cree 3 CSS en su archivo CSS
.btn { //common styles for button width="100px" fontWeight={200} height="52px" marginBottom="25px" } .primary { backgroundColor="blue" border="1px solid #595959" color="white" } .secondary { backgroundColor="grey" color="red" } .danger { backgroundColor="red" color="green" }después de esto, cambie el componente de su botón como
import React from "react"; import "./Button.css"; export interface Props { name?: string; onClick?: () => void; className?:string; } export const Button: React.FC<Props> = ({ name, onClick, className }) => { return ( <button className={`btn ${className}`} onClick={onClick} > {name} </button> ); }; export default Button;Y desde cualquier componente principal
<Button className="primary" name="Add a team member + " /> <Button className="secondary" name="Submit Project" />Nota: Esto es solo un código de muestra y classNames, puede usar los nombres y estilos de clase según lo necesite