React - cursor pointer in component and child without directly CSS

Question

I'd like some help to implement a simple cursor pointer ( hand ) in a card (and affect all child components ) . I can't use directly css, only styled component and/or inline style. my code: All code

I'd like to do some like in my parent component:

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

or similar

Parent component ...

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

child

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

... except the question is about how to apply that style and you omitted the part that is the style itself. you should be able to do style={{cursor: 'pointer'}}. verify you typed it correctly and that theres no syntax errors. — John Ruddell
– John Ruddell, Commented Jul 3, 2019 at 18:06
This really seems like a job for CSS. Is there a reason you can't use CSS for it considering you have a styles.css folder in your project? — ldtcoop
– ldtcoop, Commented Jul 3, 2019 at 18:07

John Ruddell · Accepted Answer · 2019-07-03 18:27:27Z

2

If you have to avoid css, you can use styled components and write the css there.

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 */
  }
`

If you want to do inline you could do this

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

but note elements that have a predefined cursor style may override this. the styled-components solution should enforce the pointer if thats what you want.

edited Jul 3, 2019 at 18:27

answered Jul 3, 2019 at 18:14

John Ruddell

25.9k7 gold badges60 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React - cursor pointer in component and child without directly CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related