Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Feature request] Ability to add attributes to root element #1296

Open
ghost opened this issue May 3, 2022 · 1 comment
Open

[Feature request] Ability to add attributes to root element #1296

ghost opened this issue May 3, 2022 · 1 comment

Comments

@ghost
Copy link

ghost commented May 3, 2022

Similarly to #45 , we are using SSR where react's root element is automatically generated for us. However, this messes with our styling. To solve this we would like to add styling attributes (or, probably better still, classNames) to react's root element. I could not find a way to do this, however.

Extract from ReactComponent.cs#RenderHtml:90:

return string.Format(
	"<{2} id=\"{0}\">{1}</{2}>",
	ContainerId,
	html,
	ContainerTag
);

Instead, I would expect something like (very crude)

return string.Format(
	"<{2} id=\"{0}\" ...ContainerAttributes>{1}</{2}>",
	ContainerId,
	html,
	ContainerTag,
	ContainerAttributes
);

Example

What we would like to do

<body style="margin: 0;height: 100%;display: flex;flex-direction: column;">
    <header style="background: red;height: 150px;">Hello</header>
    <main style="flex-grow: 1;background: blue;"></main>
    <footer style="background: green;height: 150px;"></footer>
</body>

What actually happens

<body style="margin: 0;height: 100%;display: flex;flex-direction: column;">
    <header style="background: red;height: 150px;">Hello</header>
    <div id="root">
        <main style="flex-grow: 1;background: blue;"></main>
    </div>
    <footer style="background: green;height: 150px;"></footer>
</body>

Proposed workaround

<body style="margin: 0;height: 100%;display: flex;flex-direction: column;">
    <header style="background: red;height: 150px;">Hello</header>
    <div id="root" style="flex-grow: 1;background: blue;">
        <main></main>
    </div>
    <footer style="background: green;height: 150px;"></footer>
</body>

Rendering everything inside the root element is unfortunately not an option at this time.
@DaniilSokolyuk
Copy link
Contributor

DaniilSokolyuk commented Feb 15, 2023 •
edited
Loading

Hi, you can try my NodeReact with custom view engine feature and render everything inside on React, sample is here https://github.com/DaniilSokolyuk/NodeReact.NET/blob/master/NodeReact.Sample.Streaming/ClientApp/components/App.jsx

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@DaniilSokolyuk