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

Body style attribut is not set properly #344

Open
testerez opened this issue Jan 4, 2018 · 9 comments
Open

Body style attribut is not set properly #344

testerez opened this issue Jan 4, 2018 · 9 comments

Comments

@testerez
Copy link

testerez commented Jan 4, 2018 •
edited
Loading

When trying to set <body> style attribute like this:

<Helmet>
  <body style={{background: 'black'}}/>
</Helmet>

It is actually set to <body style="[object Object]"/>

I figured out that I need to pass style attribute as a string to make it work:

<Helmet>
  <body style="background: black"/>
</Helmet>

This is working in the browser but for SSR I get this error:

The style prop expects a mapping from style properties to values, not a string.

Here is how I use helmet for SSR:

const Html = ({children}) => {
  const helmet = Helmet.rewind();
  return (
    <html lang="en" {...helmet.htmlAttributes.toComponent()}>
        <body {...helmet.bodyAttributes.toComponent()}>
          {children}
        </body>
    </html>
  )
}

Am I missing something?
@u840903
Copy link

u840903 commented Feb 13, 2018

I am having the very same problem with react-helmet 5.2.0.

@testerez
Copy link
Author

testerez commented Feb 14, 2018 •
edited
Loading

@janjarfalk if it helps, here is the simple workaround I used:

const getBodyStyleAttribute = (
  backgroundUrl?: string,
  backgroundColor?: string,
) => isClient
  ? [
    backgroundUrl && `background-image: url(${backgroundUrl});`,
    backgroundColor && `background-color: ${backgroundColor};`,
  ].filter(s => s).join('')
  : {
    backgroundImage: backgroundUrl ? `url(${backgroundUrl})` : undefined,
    backgroundColor: backgroundColor || undefined,
  };

@AubreyHewes
Copy link
Contributor

@janjarfalk @testerez I am using a similar solution; though more generic.

import kebabCase from 'lodash/kebabCase';

const getHelmetBodyStyleAttributeValue = (style) => {
  if (typeof window === 'undefined') {
    return style;
  }
  return Object.keys(style).map(key => `${kebabCase(key)}: ${style[key]}`).join(';');
};

It seems to work for everything I have needed so far (though might fail on non standard things as it transforms keys to kebabCase)

@testerez
Copy link
Author

Thanks for sharing @AubreyHewes what about having something similar built into react-helmet?

@AubreyHewes
Copy link
Contributor

@testerez Good point, I will get a PR going ;-)

AubreyHewes added a commit to AubreyHewes/react-helmet that referenced this issue Sep 13, 2018
@AubreyHewes
fix nfl#344 rendering body style attribute value as [object Object].
45190d6
@AubreyHewes AubreyHewes mentioned this issue Sep 13, 2018
Closed
@reyberyturiaga reyberyturiaga mentioned this issue Feb 16, 2019
Closed
@matt-whitaker
Copy link

@AubreyHewes @testerez Any update on the PR? Looks stale

@AubreyHewes
Copy link
Contributor

@matt-whitaker I never had any feedback on it.

@logemann
Copy link

@AubreyHewes thats unfortunate. Feels like a bug.

@ghost
Copy link

ghost commented Nov 14, 2021

I'm using react-helmet with Gatsbyjs. I couldn't understand @testerez and @AubreyHewes examples. I used useEffect to add style attribute to body:

useEffect(() => {
    document.body.setAttribute('style', 'background-color: red;');
}, []);

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

Successfully merging a pull request may close this issue.

fix #344 rendering body style attribute value as [object Object]. AubreyHewes/react-helmet
5 participants
@u840903 @logemann @testerez @AubreyHewes @matt-whitaker