How can I make a parent component be the label of its child component?

Question

I am using a library that renders a certain button to my layout. This is the library react-add-to-calendar .

I don't have any customization options, so I am currently wrapping the button in a div that gives the button the look that I want. The problem is though, that the child component only takes a very small portion of the parent component, and only the child component reacts to the click. So for the user, there's a button, that most of it is unclickable, even though it looks like it should be. Only clicking on the text itself sparks the desired action.

How can I make the whole button react appropriately to the click?

This is my code:

   <div className="stream__button stream__button-line clickable">
      <AddToCalendar event={event} />
    </div>

Answer 1

Can you try this.

<AddToCalendar event={event} rootClass="stream__button stream__button-line clickable" />

and remove the outer div you have now.

You can try buttonWrapperClass if rootClass is not working.

Answer 2

根据文档，您可以使用以下道具传递自定义类：

• buttonClassClosed
• buttonWrapperClass
• buttonClassOpen
• dropdownClass
• rootClass