Unable to properly style the close button

[pedro-pedrosa]

I'm not able to style the close button. In my application, I have a CSS rule button { width: 100% } that I cannot change. this causes the buttons in joyride to have full width which is not intended.

By using the styles prop I can specify width: 'auto' on all buttons except the close button. At first I thought it was because in the joyride source the custom styles are spread into the styles object before the default styles, and the default is width: 14px. this is not ideal as it doesn't allow me to override a default style but it's besides the point of this issue. The real issue is that the width prop of the buttonClose styles is applied to the SVG element instead of the button element, so I have absolutely no way of controlling the width on the button element itself.

I cannot create a custom close button either apparently.

Any other ideas? thank you!

[gilbarbara]

hey @pedro-pedrosa

Did you try this:

styles: {
  buttonBack: {
    width: 'auto'
  }
},

You can also use a custom tooltip if the default layout doesn't work for you.

[pedro-pedrosa]

that's not the button I want to style.

I tried something similar for the buttonClose but like I mentioned the width prop is not applied to the button element, it's applied to the SVG element.

Yeah I was trying to avoid recreating the entire tooltip component just to apply width: auto to a button.

[gilbarbara]

By using the styles prop I can specify width: 'auto' on all buttons except the back button.

¯\(ツ)/¯

Anyway, having width: 100% on ALL buttons is quite weird and this library shouldn't have to handle this.

[pedro-pedrosa]

¯_(ツ)_/¯

ahah sorry I mistyped

Anyway, having width: 100% on ALL buttons is quite weird and this library shouldn't have to handle this.

yeah I'm not happy with width: 100% on all buttons either, this is a shared codebase and unfortunately it's not something I can change. it's just a bit unexpected for me that the width prop is applied to all buttons correctly except this one where it's applied to the SVG instead.

[pedro-pedrosa]

anyway I went the hardcode way and just applied this css:

.react-joyride__tooltip button {
  width: auto;
}