Wrapped spans shrink width of children about react-floater

[orar]

Instance:

.buttonContainer {
 width: 200px; //doesnt matter
}
.blockButton {
  width: 100%; //will not work
  border-radius: 5px;
}

const Button = ({ innerRef, ...rest })  => {
  return <button ref={innerRef} className="blockButton" >Block Button</button>
}

<div className="buttonContainer" >
  <Floater
    content={something}
    title={someTitle}
  >
    <Button />
  </Floater>
</div>

Will not work because there are additional span wrapped around button suppressing .blockButton effect

[gilbarbara]

Yeah, this won't work since the floater is rendered outside your app in a React Portal...

You can pass your own component to the Floater and set the styles for the button.
Check the WithStyledComponents in the demo

[gilbarbara]

@orar Sorry, I understood your problem after my previous comment.
You can set the Floater styles prop to change the wrapper options.

<div className="buttonContainer" >
  <Floater
    content={something}
    title={someTitle}
	styles={{
      wrapper: {
        display: 'flex', // or display: 'block' or width: '100%'
      }
    }}
  >
    <Button />
  </Floater>
</div>

[zenVentzi]

I second that. The expected behaviour should be to maintain the styles of the parent. I noticed the 2 spans that wrap the actual component that create the issue.

I tried the wrapper: {} style solution but it didn't work. I'm sure if I hang around more I'll eventually figure out the mini mistake I've made but I'd say that this solution is quite unintuitive. Also I have way more props to be copy-pasted from the parent components into the wrapper: {} style and this creates room for mistakes from copy-pasting.

Appreciate your work though!