Aquí está mi App.js
import './App.css'; import './scripts/logic.js'; import Player from './components/Player' import { useState } from 'react' function App() { const [cordinate,setCordinate] = useState({x:"",y:""}) function moveRight(){ } return ( <div className="App"> <div className="container"> <div className="board" id="board"> <Player/> </div> <button>Move Right</button> </div> </div> ); } export default App;mi archivo css donde se define el jugador css
.player{ background-color: red; grid-row-start: 5; grid-column-start:5; } Aquí lo que quiero ahora usando la función moveRight quiero manipular el valor de la clase de jugador grid-row-start y grid-column-start ¿cómo puedo lograr esto?
Puede usar estilos en línea y pasar sus variables directamente
<div className="container" style={{gridRowStart: cordinate.x, gridRowEnd: cordinate.y}}>Tenga en cuenta que, en su caso, deberá pasar las coordenadas al componente Player como accesorios y luego usar el estilo en línea en consecuencia.
puede usar styledcomponent con estilo para esta situación
pero también puede hacerlo en su archivo js, debe usar el estilo en línea en la etiqueta jsx como esta
const [cordinate,setCordinate] = useState({x:"",y:""}) function moveRight(){ // change your state over here } const tagStyle = { gridRowStart: cordinate.x, gridColumnStart: cordinate.y , } <tag style={tagStyle}> ... </tag>