buttonNext color style does not inherit span

[lionicex]

🐛 Bug Report

By changing the color of the buttonNext, it does not inherit in the span of the button. Therefore, it does not prioritize and does not reproduce color.

To Reproduce

Add this in Joyride component prop

styles={{
    buttonNext: {
        color: 'blue',
    },
    options: {
        zIndex: 10000,
        primaryColor: '#DE5F3F'
    },
}}

And add this in your css

• { margin: 0px; padding: 0px; border: 0px; font-family: Inter, system-ui, sans-serif; text-shadow: rgb(70 70 68 / 0%) 1px 1px 1px; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; line-height: var(--line-height-default); color: rgb(70, 70, 68); }

  Expected behavior

The color of the button is inherited from the span and the color of the button text is changed.

Link to repl or repo (highly encouraged)

It´s a private repo but I have images

Joyride buttonNext style:

Joyride Span inside of buttonNext style:

You can see buttonNext without color configuration:

Joyride component props configuration:

Run npx envinfo --system --binaries --npmPackages react-joyride

Paste the results here:

  System:
    OS: macOS 13.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 544.55 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 17.8.0 - ~/.nvm/versions/node/v17.8.0/bin/node
    Yarn: 3.2.0 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - ~/.nvm/versions/node/v17.8.0/bin/npm

[gilbarbara]

Hey @lionicex

It´s a private repo but I have images

Please create a simple example in codesandbox and add the link to this issue Read the comment below

[gilbarbara]

So, buttonNext isn't a valid styles property. https://github.com/gilbarbara/react-joyride/blob/3e08384415a831b20ce21c8423b6c271ad419fbf/src/styles.js#L115C5-L120

You can set a styles prop in the step you want to change it. https://docs.react-joyride.com/step

[lionicex]

@gilbarbara : color is applied in button tag but not in span tag. If I remove span tag I resolve this issue, but I can't. when I use styles I can add buttonNext and change background color for example, but cannot change just color prop.

[gilbarbara]

You can use a custom tooltip component if you need to customize the UI beyond the available options. Or set a style in the span to color: inherit

The library can't override the host app styles...