Skip to content

Inability to style rc-tour used in a custom web component due to it being placed in the document.body by default #42

@Oluwatobi-beebittech

Description

@Oluwatobi-beebittech

Hello.

I am currently working on using the rc-tour component in an Antd 4.24.x project but I couldn't get the rc-tour divs (rc-tour-mask, rc-tour-target-placeholder, and rc-tour) to be placed within the custom web component being used.

The custom web component contains the stylings which apply to the web component alone and we don't want the styles to leak out of the component. Also, we don't want to manage a separate styles file which can be placed on the page as different page sections have different colour theme styles. We want the rc-tour theme to be controlled by the webcomponent.

Has the team explored the use of a getContainer prop which then gets passed to the Portal components within the rc-tour for such placements similar to Antd Tooltips and Popovers?

Will be glad to put in a PR for it if this use case hasn't been explored yet.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions