React - указатель курсора в компоненте и потомке без прямого CSS

Question

Мне нужна помощь для реализации простого указателя курсора ( hand ) на карте (и влияющего на все дочерние компоненты). Я не могу использовать непосредственно CSS, только стилизованный компонент и / или встроенный стиль. мой код: весь код

Я бы хотел сделать что-то похожее на мой родительский компонент:

<div id="box" style={cursorPointerThatAffecAllChild}> 

или аналогичный

Родительский компонент ...

render() {
    return (
      <div id="box"> 
        <p style={{fontWeight:'800'}}>
          My card
        </p> 
         <Child1 > </Child1>
         <p>
         some text in parent
        </p>  
      </div>
    );
...

ребенок

...
 return (
      <div>  
        <button  > My button on child 1 </button> 
        <br/><br/><br/>
        <span style={{color:'blue'}}> a span inside Child 1 </span>
       </div> 
    );
...

Answer 1

Если вам не нужно использовать css, вы можете использовать стилизованные компоненты и написать там css.

const MyCursorPointer = styled.div`
  cursor: pointer;

  * { /* this would be for elements that override the cursor pointer but are children of this component */
    cursor: pointer;
    /* cursor: pointer !important; */
    /*                      ^ Use this style if you still see a cursor other than type pointer on the children */
  }
`

Если вы хотите сделать inline, вы можете сделать это

<div style={{cursor: 'pointer'}}>

но элементы заметки, которые имеют предопределенный стиль cursor, могут переопределить это. styled-components решение должно применять указатель, если вы этого хотите.