react引入css几种方式

前言

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

方案介绍

方案1：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;  

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

1. css文件中的类名可能会发生冲突，导致样式覆盖或混乱。
2.  css文件中不能使用react的状态或属性来动态改变样式。

方案2：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;  

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

1.  css模块需要特定的命名规则和配置，不够灵活。
2. css模块不能使用react的状态或属性来动态改变样式。

方案3：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使用动态样式，但是它也有明显的缺点： 

1. 不利于代码的可读性和维护性。
2. 需要安装第三方库。

总结：

综上所述，react中引入css的方式有多种选择，小伙伴可以选择自己合适的方式。个人还是比较喜欢用第二种，代码看起来更优雅一点，如果需要用到动态样式可以使用行内样式满足需求。