樣式組件是否使用 JSX？

Question

我正在學習使用 react 和 styled 組件。 在使用樣式化組件 package 創建按鈕元素時，我的代碼編輯器頂部的 React 導入會發出警告，指出 react 已定義/聲明但從未使用過。

不是創建 html 按鈕並將其分配給 javascript 變量 JSX 嗎？ 樣式化的組件是否已經內置了 JSX 邏輯？

import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
  font: inherit;
  padding: 0.5rem 1.5rem;
  border: 1px solid #8b005d;
  color: white;
  background: #8b005d;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.26);
  cursor: pointer;

&:focus {
  outline: none;
}

&:hover,
&:active {
  background: #ac0e77;
  border-color: #ac0e77;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.26);
}
`

export default Button;

Answer 1

styled-components 庫不是 React 庫。 它是普通的 Javascript（盡管取決於模板文字，這是 JavaScript 的新功能，因此您可能需要轉譯為 ES5 以獲得廣泛的兼容性）。 在您的示例中，您導出的內容實際上是一個普通的舊 JavaScript object，而不是 React 組件。 JSX 是一種語法擴展，用於以類似 HTML 的方式高效編寫 React 組件。 它沒有在這里使用。