樣式化組件導入和 eslint 出錯

Question

我使用樣式化組件和 eslint 時出錯，

我想在單獨的文件中使用樣式化組件，但出現錯誤

styledHeader' is defined but never used.

這是整個組件

import { styledHeader } from "./header.styled";

/**
 * return a JSX Element Header
 * @return {JSX.Element} <Header/>
 */
function Header() {
  return <styledHeader>
  </styledHeader>;
}

export default Header;

Answer 1

React 組件名稱必須以大寫字母開頭。

未使用它是因為您尚未將其用作有效組件。

import { styledHeader as StyledHeader } from "./header.styled";

function Header() {
    return <StyledHeader></StyledHeader>;
}