styled-component是否使用JSX？为何导入React会提示未使用？

核心疑问解答 #

1. styled.button的写法不属于JSX
   JSX的典型标识是带尖括号的元素语法（例如<button>点击</button>），你用到的是styled-components提供的标签模板字符串语法，本质是普通的JS函数调用，全程没有触发JSX转译逻辑，自然不会用到你导入的React变量，所以编辑器会报未使用的警告。

2. styled-components已经内置了React组件封装逻辑
   你通过styled语法创建的按钮本质是一个React组件，这部分的组件生成、渲染逻辑全部由styled-components内部处理，不需要你在当前定义styled组件的文件里手动编写JSX或者调用React相关API。

修复方案 #

直接删除当前文件顶部的import React from 'react';语句即可，既可以消除警告，也不会影响组件的正常运行。
如果后续你在这个文件里需要写JSX语法，只要你用的是React17及以上的版本，也不需要手动导入React，新版JSX转译逻辑会自动引入所需的运行时依赖。

内容的提问来源于stack exchange，提问作者Krish