styled-componentsを使用する際の警告の対応

[Yuisei-Maruyama]

styled-componentsで実装中に下記エラーに遭遇した。

The component styled.div with the id of "sc-fnykZs" has been created dynamically. You may see this warning because you've called styled inside another component.

[Yuisei-Maruyama]

上記エラーはコンポーネント内部に styled-components の変数があることで発生した警告であった為、
styled-components の変数をコンポーネントの外側に定義し直すことで解決した。

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

import React, { useContext } from 'react'
import { Typography } from '@mui/material'
import { ProgressBar } from '@/components'
import styled from 'styled-components'
import { LanguageContext } from '@/pages/Main'

type Props = {
  style?: Record<string, string | number>,
}

interface BgProps {
  bgColor: string;
}

interface StyleProps {
  style: Record<string, string | number>
}

export const getBgColor = (languageName: string) => {
  switch (languageName) {
    case 'CSS':
      return '#563D7C'
    case 'HTML':
      return '#E34C26'
    case 'JavaScript':
      return '#F0D81D'
    case 'SCSS':
      return '#C6538C'
    case 'Shell':
      return '#EDEDED'
    case 'TypeScript':
      return '#2B7489'
    default:
      break
  }
  return '#fff'
}

//  -------------------------ここから-------------------------
const _LanguageNameWrapper = styled.div`
    display: flex;
    width: 75%;
    margin: 30px auto 0;
    justify-content: space-around;
    align-items: center;
  `

const _ColorRound = styled.div<BgProps>`
    width: 30px;
    height: 30px;
    border-radius: 16px;
    background-color: ${({bgColor}) => (bgColor || '#fff')};
    border: 1px solid #06D8D7;
  `
const _Progress = styled.div`
    width: 100%;
    text-align: center;
    `

const $ProgressWrapper = styled(_Progress)<StyleProps>`
    ${props => props.style}
  `

//  -------------------------ここまで-------------------------

const ProgressArea: React.FC<Props> = ({style}) => {

  const languages = useContext(LanguageContext)

  return (
    <$ProgressWrapper  style={style || {}}>
      <Typography style={{ lineHeight: 2, fontSize: '30px', color: '#06D8D7' }}>GitHub Repository Language Stats</Typography>
      <ProgressBar style={{ width: '75%', height: '30px', borderRadius: '15px' }} />
      <_LanguageNameWrapper>
        {
          languages ?
          Object.keys(languages).map((languageName, index) => {
            return (
              <div key={index} style={{ display: 'flex'}}>
                <_ColorRound bgColor={getBgColor(languageName)}></_ColorRound>
                <Typography sx={{ fontSize: '20px', color: '#06D8D7', marginLeft: '10px' }} component='p'>{languageName}</Typography>
              </div>
            )
          })
          : ''
        }
      </_LanguageNameWrapper>
    </$ProgressWrapper>
  );
}

export default ProgressArea;