Add a border color to the Highlighted area

[rezarezash]

Hello, could you tell me how I can add a border with color to the highlighted area, please? None of the below combinations works for me

root.render(
    <TourProvider steps={steps} styles={{
        control: (base) => ({
            ...base,
            border: '2px solid red',
        }),
        maskWrapper: (base) => ({
            ...base,
            border: '2px solid red',
        }),
        maskRect: (base) => ({
            ...base,
            border: '2px solid red',
        }),
        highlightedArea: (base) => ({
            ...base,
            border: '2px solid red', 
            outlineOffset: '5px',
        }),
        badge: (base) => ({ ...base, color: 'black', background: '#e0aa3e' })
    }}>
        <App />
    </TourProvider>
);

[elrumordelaluz]

Hi @rezarezash, thanks for open the Issue.

You can do this using svg props instead of border or outline, since the mask is svg-based. Something like:

<TourProvider
      steps={steps}
      styles={{
        highlightedArea: (base) => ({
          ...base,
          stroke: "#e0aa3e",
          strokeWidth: "2px",
          display: "block",
          pointerEvents: "none",
        })
    }} />

Remember to show this part using display: block (since is hidden by default) and allow clicking/interacting with the elements below using pointerEvents: "none".

Here is a working example.