前言

在react中，有几种不同的方式可以引入css样式。这些方式有各自的优缺点，适用于不同的场景。本文将介绍三种常见的方式：普通的css文件，css模块和styled-components。

方案介绍

css文件引入

普通的css文件是最简单的方式，就是在react组件中直接引入css文件，例如：

import React from 'react';  
import './App.css';  
  
function App() {  
return (  
<div className="App">  
<h1>Hello, world!</h1>  
</div>  
);  
}  
  
export default App;  

这种方式的好处是简单易用，不需要额外的配置或依赖。但是也有一些缺点，比如：

• css文件和react组件是分离的，不利于组件化开发和复用。
• css文件中的类名可能会发生冲突，导致样式覆盖或混乱。
• css文件中不能使用react的状态或属性来动态改变样式。

css模块引入

css模块是一种解决类名冲突的方式，它可以让每个组件拥有独立的作用域，避免全局污染。使用css模块，需要将css文件命名为[组件名].module.css，例如：

import React from 'react';  
import styles from './App.module.css';  
  
function App() {  
return (  
<div className={styles.App}>  
<h1 className={styles.title}>Hello, world!</h1>  
</div>  
);  
}  
  
export default App;  

这种方式的好处是可以保证类名的唯一性，避免冲突。但是也有一些缺点，比如：

• css模块仍然是分离的文件，不利于组件化开发和复用。
• css模块需要特定的命名规则和配置，不够灵活。
• css模块仍然不能使用react的状态或属性来动态改变样式。

styled-components引入

styled-components是一种将css和react组件结合在一起的方式，它可以让我们在js文件中直接写css代码，例如：

import React from 'react';  
import styled from 'styled-components';  
  
const StyledApp = styled.div`  
display: flex;  
align-items: center;  
justify-content: center;  
height: 100vh;  
`;  
  
const StyledTitle = styled.h1`  
color: ${props => props.color || 'black'};  
`;  
  
function App() {  
const [color, setColor] = React.useState('black');  
  
const handleClick = () => {  
setColor(color === 'black' ? 'red' : 'black');  
};  
  
return (  
<StyledApp>  
<StyledTitle color={color} onClick={handleClick}>Hello, world!</StyledTitle>  
</StyledApp>  
);  
}  
  
export default App;  

这种方式的好处是可以实现组件化开发和复用，也可以使用react的状态或属性来动态改变样式。但是也有一些缺点，比如：

• styled-components需要安装第三方库，并且需要学习新的语法和规范。
• styled-components可能会影响性能和调试，因为它会在运行时生成和注入样式。
• styled-components可能会导致样式和逻辑混杂在一起，不利于代码的可读性和维护性。

总结

综上所述，react中引入css的方式有多种选择，没有绝对的好坏，只有适合不适合。我们应该根据项目的需求和特点，选择合适的方式来实现我们想要的效果。