reactjs
[Feature request] Ability to add attributes to root element
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.
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
