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.
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:Instead, I would expect something like (very crude)
Example
What we would like to do
What actually happens
Proposed workaround
Rendering everything inside the root element is unfortunately not an option at this time.