The component styled.div with the id of "sc-fzqAui" has been created dynamically. You may see this warning because you've called styled inside another component. To resolve this only create new StyledComponents outside of any render method and function component.

[eugle]

The component styled.div with the id of "sc-fzqAui" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

Is there any way to get rid of this warning? There will be a warning in the development environment, and everything is normal in the production environment

This is my actual component code

Based on the component's properties, I wrapped an NPM package,

@eugle/oneui

[CyrilQuandalle]

Hi,
Can you show us where you've declared your components ? I've generaly got this warning when my styled components were declared inside a function component.

[alac1984]

Hi,
Can you show us where you've declared your components ? I've generaly got this warning when my styled components were declared inside a function component.

I'm getting the same. So, what is the right way to do it? Where should I declare styled components?

[CyrilQuandalle]

Hi,
Like that :

import styled from 'styled-components'

const StyledSpan = styled.span`
    color: blue;
`
const MyExampleComponent = () =>{
    return <StyledSpan>Test</StyledSpan>
}

I think you're doing it like that:

import styled from 'styled-components'

const MyExampleComponent = () =>{

    const StyledSpan = styled.span`
        color: blue;
    `
    return <StyledSpan>Test</StyledSpan>
}

That's why you've got the warning.

[eugle]

@CyrilQuandalle Thank you very much for pointing out the problem, my code

Is there a good way to get around this because I want to get the parent context parameter in the component

Once again thank you

[CyrilQuandalle]

You can do that like that :

const Nav = styled.div`
    div > a.active > div {
        color: ${props => props.color}
     }
`
function Header() {
    const {DefaultColor} = useContext(GlobalContext)
    return <Nav color={DefaultColor?.success} />
}

[eugle]

wow, So simple, why didn't I think, thank you for your kind help, I will try to get rid of this mistake

[CyrilQuandalle]

https://styled-components.com/docs/basics#passed-props ;-)

[eugle]

@CyrilQuandalle Thank you so much that I have solved the problem completely using your method. Now all the mistakes are gone. It's great

[praveendass]

@CyrilQuandalle Even I am facing the same issue. I like to keep my style objects in a separate JS file.
For styles without any dynamic attributes, I don't face any issue.

But in the other case, I write something like the below:
export const getColumn = (ratio) => {
return styled.div flex: ${ratio};
}

and use it like below:
const Column = getColumn(columnRatio[index]);
return({header})

In this case, I face the issue under discussion. What would be the workaround?

[CyrilQuandalle]

Hi @praveendass ,

I never used it like that ;-). Maybe move const Column = getColumn(columnRatio[index]); outside the function component. Just above the component in the same file for example.

[praveendass]

@CyrilQuandalle Hey thanks for the quick response!
That wouldn't do, because the value of ratio keeps changing as I iterate.

const getColumn = (ratio) => {
return (styled.divflex: ${ratio}; )
}
const TableHeaderComponent = ({headers, columnRatio}) => {

return ( 
    <TableHeader>
        {
        headers.map((header, index) => {
            const Column = getColumn(columnRatio[index]);
            return(<Column key={index} >{header}</Column>)
        }) }

    </TableHeader>
 );

}

Any suggestion on how I can get around this?

[CyrilQuandalle]

I dont know then. Why do you need a function to render your divs as you can just pass a props for the ratio to it ?
like that :

const Column = styled.div`flex: ${props => props.ratio}`

const TableHeaderComponent = ({headers, columnRatio}) => {
return ( 
    <TableHeader>
        {
        headers.map((header, index) => {
            return(<Column key={index} ratio={columnRatio} >{header}</Column>)
        }) }

    </TableHeader>
 );

[praveendass]

@CyrilQuandalle Just figured it out... :D
I wasn't aware that styled-components are HOC wrapped over react components...
I was in the idea that it was a JS object (non-react) and didn't have props attribute for itself
Well, now I know!
https://stackoverflow.com/questions/61874381/the-component-styled-has-been-created-dynamically-you-may-see-this-warning-be

[heymartinadams]

Sorry for adding another comment here — I’m not understanding what to do. Receiving the same warning, yet nothing I do can fix this. Like @eugle, I, too, want to keep my styled-components in separate JS files, since many SCs are used as building blocks over and over again.

How can I refactor the following?

Section.js

export default styled.div`
	position: relative;
	width: 100%;
`

Homepage.js

import Section from '@/Section'

const Homepage = () => (
	<Section>
		Hello, world!
	</Section>
)

export default Homepage

Tried various changes to no avail.

[CyrilQuandalle]

Hi @heymartinadams ,

What warning do you have ?
Thats strange though, I replecated your code in the following codesandbox and I have no warning :
https://codesandbox.io/s/styled-components-vi0g5?file=/index.js

[heymartinadams]

Here’s the error message, @CyrilQuandalle:

The component Section with the id of "Section-sc-1fu27j3-0" has been created dynamically.
You may see this warning because you've called styled inside another component.
To resolve this only create new StyledComponents outside of any render method and function component.

(for each and every SC)

Mmh... my situation is probably made more complex in that I’m using Preact (instead of React) as well as the NextJS framework. Could that perhaps be the cause of it?

[CyrilQuandalle]

Yes it could be caused by Preact or NextJS. I just found that I dont know if it fits your case :

https://github.com/styled-components/styled-components/issues/3174

[heymartinadams]

Thank you, @CyrilQuandalle! Subscribed to the corresponding Preact issue.

At least it seems it’s only a warning trigger that’s at issue, not an actual problem with the code or execution.

[felipemotabr]

Hi,
Like that :

import styled from 'styled-components'

const StyledSpan = styled.span`
    color: blue;
`
const MyExampleComponent = () =>{
    return <StyledSpan>Test</StyledSpan>
}

I think you're doing it like that:

import styled from 'styled-components'

const MyExampleComponent = () =>{

    const StyledSpan = styled.span`
        color: blue;
    `
    return <StyledSpan>Test</StyledSpan>
}

That's why you've got the warning.

This is work. Thank you @CyrilQuandalle

[hydego17]

Hi, Im getting the same warning message when I tried to use component from react styled loaders

is there any solution?

[sarahrara18]

@CyrilQuandalle Hello, i have the same issue while using react-data-table-component ,i posted my problem here jbetancur/react-data-table-component#840 , the problem is i didn't use styledComponent at all

[DungVietLe]

excusme~ . some one help me

in my function component there is no styled but why does it say warning ?

[yeasinjabed2]

Hi, Can you show us where you've declared your components ? I've generaly got this warning when my styled components were declared inside a function component.

My problem with SVG, any solutions ?

[brunomguimaraes]

https://stackoverflow.com/questions/61874381/the-component-styled-has-been-created-dynamically-you-may-see-this-warning-be

I also got a similar problem with my svgs
Check this out:

import { ReactComponent as chevron } from "assets/chevron.svg";
import { ReactComponent as guest } from "assets/guest.svg";
import { ReactComponent as bath } from "assets/bath.svg";
import { ReactComponent as pool } from "assets/pool.svg";
import { ReactComponent as rooms } from "assets/rooms.svg";
import { ReactComponent as arrow } from "assets/arrow.svg";
import { ReactComponent as arrowDown } from "assets/arrow-down.svg";

import styled from "styled-components/macro";

type IconSize = "sm" | "md" | "default";

export interface IconProps {
  name: keyof typeof iconOptions;
  color?: string;
  opacity?: number;
  size?: IconSize;
  inverted?: boolean;
}

const iconOptions = {
  chevron,
  bath,
  guest,
  pool,
  rooms,
  arrow,
  arrowDown,
};

export const Icon = ({
  name,
  color,
  opacity,
  size = "default",
  inverted,
}: IconProps) => {
  const StyledIcon = styled(iconOptions[name])`
    fill: ${color};
    opacity: ${opacity};

    ${inverted &&
    `
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
  `}

    ${size === "md" &&
    `
    width: 9px;
  `}

  ${size === "sm" &&
    `
    width: 6.75px;
  `}
  `;

  return <StyledIcon />;
};

I'm creating the Icon component based on the svg name. And I can't figure out how not to do this without triggering the dynamically created error. Can't someone shed some light in this?

[pkaufi]

You can try with

import { cloneElement, HTMLProps } from "react";
.
.
.
export const Icon = styled(({
                         name,
                         color,
                         opacity,
                         size = "default",
                         inverted,
                        ...props }: IconProps) => cloneElement(iconOptions[name], props)
)`
    fill: ${({ color }) => color};
    opacity: ${({ opacity }) => opacity};

    ${({ inverted }) => inverted &&
    `
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
  `}

    ${({ size }) => size === "md" &&
    `
    width: 9px;
  `}

  ${({ size }) => size === "sm" &&
    `
    width: 6.75px;
  `}
`;

[skmainwal]

Hi, Like that :

import styled from 'styled-components'

const StyledSpan = styled.span`
    color: blue;
`
const MyExampleComponent = () =>{
    return <StyledSpan>Test</StyledSpan>
}

I think you're doing it like that:

import styled from 'styled-components'

const MyExampleComponent = () =>{

    const StyledSpan = styled.span`
        color: blue;
    `
    return <StyledSpan>Test</StyledSpan>
}

That's why you've got the warning.

Hi ,I have written the code like this but I am getting an error

[jvnlwn]

Came across the same warning and it did not appear that the styled component was actually being created dynamically, at least not to my un(styled)trained eyes.

Here's a repro sandbox on version 5.3.5 of styled-components in case this helps. The warning was not thrown on version 5.0.0-beta which is currently the default version used in the base codesandbox provided when creating a new issue.

The issue comes from requiring a styled component within the body of the functional component, like so:

const Consumer = ({ componentName }) => {
  const Component = require(`./components`)[componentName];
  return <Component />;
};

A workaround is to import all components outside of the functional component:

import * as Components from "./components"

const Consumer = ({ componentName }) => {
  const Component = Components[componentName]
  return <Component />;
};

Hope this helps someone.

[ghost]

I solved it through this nextjs documentation in the link below

nextJs: https://nextjs.org/docs/advanced-features/custom-document

video: https://youtu.be/lKD5Z0ORA54?t=1254