样式组件是否使用 JSX？答案

【问题标题】：Does a styled-component use JSX?样式组件是否使用 JSX？
【发布时间】：2022-01-08 13:57:28
【问题描述】：

我正在学习使用 react 和 styled 组件。在使用样式化组件包创建按钮元素时，我的代码编辑器顶部的 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;

【问题讨论】：

您显示的代码中没有 JSX，React 确实在此处未使用。当你用它来做<Button /> 或类似的东西时，那就是 JSX。
不确定您是否将声明的样式组件声明放在脚本底部（通常这些放在组件导出后的底部）。询问样式组件的结构很容易得到答案here

标签： javascript css reactjs frontend styled-components

【解决方案1】：

styled-components 库不是 React 库。它是普通的 Javascript（虽然依赖于模板文字，这是 JavaScript 的一个新特性，因此您可能需要转译为 ES5 以获得广泛的兼容性）。在您的示例中，您导出的内容实际上是一个普通的旧 JavaScript 对象，而不是 React 组件。 JSX 是一种语法扩展，用于以类似 HTML 的方式高效编写 React 组件。此处未使用。

【讨论】：