Estoy tratando de agregar estilo a un elemento en mi devolución de un componente de reacción, pero quiero lograr esto sin agregar una clase. Mi editor de texto completa automáticamente una opción de estilo, pero creo que la sintaxis es incorrecta, ya que cuando intento agregar una función en un evento onClick, es un poco diferente cuando se trata de la devolución de un elemento de reacción. Por ejemplo, en lugar de onClick=function() es onClick={() => {function()}} Espero que en lugar de style={"background-color: green;"} sea una sintaxis diferente para permitir el estilo cambia una vez que llega al dom.
Se pueden hacer estilos en línea, y aquí hay un ejemplo de código ya que no ha proporcionado uno.
por ejemplo, permite diseñar en línea una etiqueta h1
<h1 style={{background-color:'green', color:'white'}}>This is a tilte</h1>más se puede encontrar aquí
además, no recomendaría el estilo en línea, ya que no es un estándar de la industria y puede hacer que su código se borre.
Las etiquetas de estilo en reaccionar pueden contener referencias a funciones.
No estoy completamente seguro de si está trabajando con clases de componentes React o funciones de componentes, pero su sintaxis también puede ser la siguiente. Cree una variable llamada customStyle que contendrá una función que devuelva su objeto de estilo requerido:
customStyle = () => { return { color: 'red' } }; A continuación, puede hacer referencia a customStyle dentro del marcado de la siguiente manera:
<div style={this.customStyle()}>My Element</div>No sé si entendí bien tu pregunta, puedes lograr lo que quieres haciendo un estado de estilo, luego mutarlo al estilo que quieras con setState
const [style, setStyle] = useState({}) const App = () => { return <div style={style}> <button onClick={() => setStyle({color: 'red'})}>handler button </button> </div> }