Estoy tratando de agregar un nombre de className adicional para mi componente <Button /> pero no está agregando el nuevo nombre de className .
Tengo el componente Button que contiene
import React from 'react'; import './Button.css'; import { Link } from 'react-router-dom'; export const Button = ({ children, type, onClick }) => { return ( <Link to="/" className="btn-mobile"> <button className={`btn`} onClick={onclick} type={type}> {children} </button> </Link> ) } Llamo a <Button /> desde otro archivo y trato de agregar un nombre de className adicional a ese botón, pero eso no funciona.
<div className="ticket"> <Button className="ticket"> Visit Now</Button> </div> Cuando revisé los elementos de las herramientas para desarrolladores, el botón Visitar ahora solo tiene el nombre de clase de btn .
¿Cómo puedo agregar un nombre de className adicional en esta instancia?
Button.js debería ser así.
const Button = ({ className, onClick, type, children }) => ( <button className= {className} onClick={onClick} type={type}>{children}</button> );Puedes hacerlo simple de la siguiente manera.
const Button = props => <button {...props} />; Luego exporte el Button como predeterminado.
export default Button;Cree una variable usando tanto la clase de botón predeterminada como el nombre de clase transmitido en accesorios en una cadena de plantilla y luego use esa variable como el nombre de className .
Aquí hay un ejemplo de trabajo completo.
function Button(props) { const { classname, handleClick, type, children } = props; const classnames = `btn ${classname}`; return ( <button className={classnames} onClick={handleClick} type={type} >{children} </button> ); } function Example() { function handleClick(e) { console.log(e.target.textContent); } return ( <div> <Button classname="ticket" type="button" handleClick={handleClick} >Click me</Button> </div> ); }; ReactDOM.render( <Example />, document.getElementById('react') ); .btn { border: 2px solid red; } .ticket { background-color: #55dd44; } .ticket:hover { background-color: #ff3377; border: 1px solid blue; cursor: pointer; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>En su clase Button.js, debe asignar una clase externa que proporcionó de otro componente como accesorio.
En su clase Button.js, debe actualizar su código como se muestra a continuación
si componente funcional
<button className= {`btn ${props.className}`} onClick = {onclick} type = {type}> {children}/button>Nota: asegúrese de usar accesorios como parámetro en el componente funcional
si componente basado en clase
<button className= {`btn ${this.props.className}`} onClick = {onclick} type = {type}> {children}/button>