Styledで定義したstyled-componentsにcssが適用されないとき

styledを使ってcssを適用したコンポーネントを定義する際、never usedのwarningが出てcssも適用されないときの対処法

問題が出るテストコード

import React from 'react'
import { Paper } from '@mui/material';
import {styled} from '@mui/material/styles';


// styledされた変数の名前が重要
const styledpaper = styled(Paper)(({theme}) => ({
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
}));

const test = () => {
  return (
    <styledpaper>TestText</styledpaper>
  )
}

export default test

実際のエラー

 Line 7:7:  'styledpaper' is assigned a value but never used  no-unused-vars

解決策

styledで定義した変数名を大文字にする必要がある
エラーの出るコードでは

const styledpaper = styled(Paper)(({theme}) => ({

というふうにstyleを適用しており、この時宣言する変数名styledpaperは先頭を大文字にする必要がある。
今回で言えば"styledpaper" を "Styledpaper" に変更する。

##　変更後

import React from 'react'
import { Paper } from '@mui/material';
import {styled} from '@mui/material/styles';


// styledされた変数の名前をStyledpaperに変更
const Styledpaper = styled(Paper)(({theme}) => ({
    marginTop: theme.spacing(8),
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
}));

const test = () => {
  return (
    <Styledpaper>TestText</Styledpaper>
  )
}

export default test

これでwarningが消えてcssも適用された。