Estoy reutilizando una serie de componentes de reacción y quiero cambiar los estilos en línea con los que se generan. ¿Cómo, por ejemplo, console.log los estilos en línea de un componente de reacción?

EDITAR: fragmento de código a continuación:

const pieces = this.props.pieces.map((decl, i) ={amp}gt; { const isMoving = draggingPiece {amp}amp;{amp}amp; i === draggingPiece.index; const { x, y, piece } = decode.fromPieceDecl(decl); const Piece = pieceComponents[piece]; return ( {amp}lt;Draggable bounds="parent" position={{ x: 0, y: 0 }} onStart={this.handleDragStart} onDrag={this.handleDrag} onStop={this.handleDragStop} key={`${piece}-${x}-${y}`} {amp}gt; {amp}lt;Piece isMoving={isMoving} x={x} y={y} /{amp}gt; {amp}lt;/Draggable{amp}gt; ); }); console.log(pieces[8].style) // error 

No creo que puedas. Al menos no desde el exterior de ese componente.

En su código aquí las pieces[8] es una función que representa JSX, y no el resultado de un render. Por lo tanto, los estilos en línea no se habrían presentado aún.

Lo mejor sería entrar en el código del componente Piece y console.log las variables que crean esos estilos en línea.