React项目文件夹结构及样式冲突、未使用变量报错问题咨询

问题原因说明 #

1. is defined but never used报错

你引入样式文件时采用了import 变量名 from '样式文件路径'的写法，代码中没有用到这个赋值的变量，触发了ESLint的未使用变量检测规则，就会抛出该报错。如果是全局引入普通CSS，不需要接收返回值，直接写import './styles/xxx.css'即可。

2. 未引入addcontact.css却应用了对应样式

普通CSS的引入是全局生效的，只要你在项目任意位置引入了该CSS文件，里面的样式规则都会作用到整个页面的所有元素上。你的addcontact.css直接对button标签做了样式定义，自然项目中所有的<button>元素都会匹配到该样式，和是否通过props返回元素没有任何关系，这是典型的全局样式污染问题。

3. 仅添加一个按钮却出现两个按钮

你在AddContact.js中定义了Add按钮，在ContactList.js中每个联系人项都定义了Delete按钮，只要你的props.contacts有至少一条数据，页面就会同时渲染Add按钮和至少一个Delete按钮，两个按钮属于不同组件，属于正常渲染结果，不是异常问题。

解决方案 #

• 避免全局样式污染：改用CSS Modules方案，将样式文件重命名为xxx.module.css（例如addcontact.module.css），样式规则全部用类名定义，不要直接给原生标签加样式。引入时写import styles from './styles/xxx.module.css'，给元素绑定类名时使用<button className={styles.自定义类名}>的格式，这样样式只会作用于当前组件内的元素。
• 消除未使用变量报错：如果继续用全局CSS引入，直接去掉import语句前的变量名；如果改用CSS Modules，绑定类名时用到了引入的styles变量，报错自然会消失。
• 也可以选择CSS-in-JS类方案、scoped样式方案（需要对应loader支持），都可以解决全局样式污染问题。

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