React的css样式

1.内联样式(lnline Styles)

(1).使用JavaScript对象来定义CSS样式。
(2).样式名称是驼峰式的(比如backgroundColor而非background-color)
(3).有点：动态样式简单直接，无需额外的CSS文件或库
(4).缺点：对于复杂的样式和复用，内联样式可能变得难以管理
示例：

# jsx:
const divStyle = {  
  color: 'blue',  
  backgroundImage: 'url(' + imgUrl + ')',  
  // ...其他样式  
};  
 
function HelloWorldComponent() {  
  return <div style={divStyle}>Hello, world!</div>;  
}

2.CSS Modules

(1).使用CSS文件，通过CSS类名来应用样式。
(2).通过Webpack等构建工具配合loader（如css-loader和style-loader）来将CSS类名转换为唯一的哈希值，以避免命名冲突。
(3).优点：支持局部作用域、样式复用、CSS预处理器（如Sass、Less）。
(4).缺点：可能需要额外的构建配置。
示例（在CSS文件中）：

# css:
/* styles.module.css */  
.title {  
  color: red;  
}

在React组件中：

# jsx:
import styles from './styles.module.css';  
 
function Title() {  
  return <h1 className={styles.title}>Hello, world!</h1>;  
}